Question

我确定这只是简单的html / css，但我不知道该怎么称呼吧（谷歌搜索横条html总是会导致横向规则）。

http://jquery.com/有一个 - 横跨顶部的灰色条将菜单与页面内容分开。我很想做自己的一个。

Answer 1

有很多方法可以做到这一点。

在jquery.com上，它是应用了body标签的背景图片的一部分。

您可以将标题部分的背景与底部对齐，作为图像和底部填充，以防止文本/内容覆盖该部分。最后，如果你想要纯色，你可以使用粗边框。我相信还有很多其他方法可以做到这一点。

Answer 2

最简单的解决方案：

<!-- content above bar goes here -->
<div style="height:30px;background-color:lightgray;clear:both;" ></div>
<!-- content below bar goes here -->

你做得很清楚：两者都是为了防止你想要保持在栏上方的浮动元素。

Answer 3

它是一个应用于body标签的BG image。

body {
    background: #2a3139 url(../images/bg_home_tile_sml.jpg) repeat-x 50% 0;
}

IMO是实现这种效果的最佳方式。

Answer 4

最好的方法（在我看来）是页面背景图像方法，如果你的设计足够静态。否则，创建一个具有正确高度的div，将其背景图像设置为具有正确高度/颜色/渐变属性的非常薄（1或2像素）图像，并将其平铺在x轴上。

我会避免使用粗边框方法，因为在不同的浏览器上可能会有不同的渲染方式。