有时候我们用到导航栏居中显示，但是有通栏背景色的效果，比如本站现在(12月)的导航栏就是通栏背景的。经过调试，发现了一个非常简单的通栏背景的 DIV + CSS 代码，首先看 CSS 代码：
第一个，通栏背景导航 CSS 代码：
body{margin:0px;}
/*要想通栏背景，必须要body的margin属性设为0px，这样网页上下左右才不会有空隙*/
#header-blue{
margin-top:30px;/*顶部的空隙，这里设为30像素，根据自己的需要设置即可。*/
height:20px;
background:#3399cc;
border:5pxsolid#3399cc;
}
#nav{
margin:0auto;/*主导航居中*/
width:800px;/*主导航的宽度*/
}
#nava{
color:#fff;
text-decoration:none;
}
#link{
padding-left:30px;
width:100px;
float:left;
}
下面是相应的 HTML 代码：htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
顶部通栏横线CSS
body{margin:0px;}
#header-blue{
margin-top:30px;
height:20px;
background:#3399cc;
border:5pxsolid#3399cc;
}
#nav{
margin:0auto;
width:800px;
}
#nava{
color:#fff;
text-decoration:none;
}
#link{
padding-left:30px;
width:100px;
float:left;
}
首页且听风吟PHP学习ASP技术视觉设计留言
第二个，通栏底部细线 CSS 代码/*通栏细线*/
#header-red{
margin-top:50px;
padding-top:30px;
height:30px;
border-bottom:1pxsolid#cc6666;
}
#nav-red{
margin:0auto;
width:800px;
}
#nav-reda{
color:#cc6666;
text-decoration:none;
}
#link{
padding-left:30px;
width:100px;
float:left;
}
相应的HTML 代码跟第一个类似，就不再重复贴出了。
下面是相应的 Demo 网页：
PS.补充分割线，以下为原来的代码。
下面有两种办法可以实现：
.topbar{
min-weight:800px;/*最重要的*/
height:30px;
overflow:hidden;
background:#468dccrepeat-x;
}
Homephototelephonecomputerkeyborde
bodyul{
margin:0;
padding:0;
}
ul{
list-style-type:none;
}
.bg_color{
background-color:#468dcc;
height:30px;
width:100%;
overflow:hidden;
position:relative;
}
.topbar{
height:30px;
width:800px;
margin:0auto;
position:absolute;
top:???;/*调节高度使其和bg_color完全重合*/
}
Homephototelephonecomputerkeyborde
