代码之家 › 专栏 › 技术社区 › Tim

html/css:jquery等网站上的水平条/设计

sitedesign css html

2

Tim · 技术社区 · 17 年前

我确信它只是简单的html/css,但是我不知道该怎么称呼这个条(搜索水平条html总是得到一个水平规则)。

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

4 回复 | 直到 17 年前

1

3

Boris Smirnov 17 年前

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

在jquery.com上,它是应用了body标记的背景图像的一部分。

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

2

Will 17 年前

最简单的解决方案:

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

你做清楚了:两者都是为了防止你是浮动元素,你想保持在上面的酒吧。

3

1

camainc 17 年前

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

我会避免使用粗边框方法,因为在不同的浏览器上可能呈现不同的效果。

4

1

Jason Plank Maksim Kondratyuk 14 年前

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

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

我认为这是达到这种效果的最好方法。