导航居中分布css,导航居中背景色通栏显示 DIV + CSS 代码

有时候我们用到导航栏居中显示，但是有通栏背景色的效果，比如本站现在(2017年12月)的导航栏就是通栏背景的。经过调试，发现了一个非常简单的通栏背景的 DIV + CSS 代码，首先看 CSS 代码：

第一个，通栏背景导航 CSS 代码：

body{margin:0px;}

/*要想通栏背景，必须要 body 的 margin 属性设为0px，这样网页上下左右才不会有空隙*/

#header-blue{

margin-top:30px; /*顶部的空隙，这里设为30像素，根据自己的需要设置即可。*/

height:20px;

background:#3399cc;

border:5px solid #3399cc;

}

#nav {

margin: 0 auto; /*主导航居中*/

width: 800px; /*主导航的宽度*/

}

#nav a{

color:#fff;

text-decoration: none;

}

#link {

padding-left:30px;

width:100px;

float:left;

}

下面是相应的 HTML 代码：html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

顶部通栏横线CSS

body{margin:0px;}

#header-blue{

margin-top:30px;

height:20px;

background:#3399cc;

border:5px solid #3399cc;

}

#nav {

margin: 0 auto;

width: 800px;

}

#nav a{

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:1px solid #cc6666;

}

#nav-red {

margin: 0 auto;

width: 800px;

}

#nav-red a{

color:#cc6666;

text-decoration: none;

}

#link {

padding-left:30px;

width:100px;

float:left;

}

相应的HTML 代码跟第一个类似，就不再重复贴出了。

下面是相应的 Demo 网页：

PS.补充分割线，以下为原来2013年的代码。

下面有两种办法可以实现：

.topbar {

min-weight: 800px; /* 最重要的 */

height: 30px;

overflow: hidden;

background: #468dcc repeat-x;

}

• Home
• photo
• telephone
• computer
• keyborde

body ul {

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: 0 auto;

position: absolute;

top: ???; /* 调节高度使其和bg_color完全重合 */

}

• Home
• photo
• telephone
• computer
• keyborde