0

我有一个背景为黑色的菜单和背景为灰色的子菜单。

现在我想在它们之间有一个像素完美的分隔线。

但我不知道应该使用什么边框颜色来获得像素完美分隔符。谁能帮我？

这是html代码

<!DOCTYPE html>
<html>
<body>
<div class="mainnav">
    <p> This is main nav </p>
</div>
<div class="subnav">
     <p> This is sub nav </p>
</div> 
</body>
</html>

这是我的CSS

.mainnav {
width:100%;
    height:60px;
    background-color:#000000;
    color:#ffffff;
    text-align:center;
}
.mainnav p {
padding-top:20px; 
}
.subnav p {
padding-top:10px; 
}
.subnav {
width:100%;
    height:45px;
    background-color:#333;
    color:#ffffff;
    text-align:center;
}

​</p>

这是我的jsfiddle。

http://jsfiddle.net/ruUgk/

谢谢。

4

3 回答 3

2

添加底部边框.mainnav

.mainnav {
    border-bottom:1px solid #fff;
}

http://jsfiddle.net/ruUgk/1/

于 2012-11-12T00:51:47.193 回答
0

我认为您不需要任何像素完美的分隔符！它是好的。无论如何，我不认为这个网站是针对这类问题的，你应该在这里有一个技术问题，而不是关于如何让事情看起来不错的问题。

于 2012-11-12T00:50:23.263 回答
0

我将在它们之间添加一条虚线

将以下行添加到 mainnav css

border-bottom:1px dotted #fff;

在 JSFiddle 上检查这个

http://jsfiddle.net/ruUgk/2/
于 2012-11-12T01:07:51.293 回答