DIV+CSS导航栏

HTML文件 

<div id="header">

<h1>Your Website</h1>
<h2>catchy slogan...</h2>
</div>
<div id="navigation">
<ul>
<li><a href="index.php">Home Page</a></li>
<li><a href="calculator.php">Calculator</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>

</div>

CSS文件

*{
border:0;
margin:0;
padding:0;
}


/* general */
a {
color:#777;
text-decoration:none;
}


a:hover {
color:#333;
text-decoration:none;
}


/* body */
body {
background:#ffffff;
color:#555;
font:0.8em Arial, Helvetica, "bitstream vera sans", sans-serif;
}


/* header */
#header {
border-bottom:1px solid #999;
height:80px;
margin:0px auto;
width:751px;
}
#header h1 {
color:#888;
font-size:300%;
letter-spacing:-3px;
text-align:right;
padding:5px;
margin-bottom:-20px;
}
#header h2 {
color:#CCC;
font-size:200%;
letter-spacing:-2px;
text-align:right;
}


/* navigation */
#navigation {
background:#fafafa;
border-right:1px solid #999;
margin:0 auto;
width:750px;
height:40px;
list-style:none;
}
#navigation li {
border-left:1px solid #999;
float:left;
width:149px;
list-style:none;
}
#navigation a {
color:#555;
display:block;
line-height:40px;
text-align:center;
}
#navigation a:hover {
background:#e3e3e3;
color:#555;
}
#navigation .active {
background:#e3e3e3;
color:#777;
}


/* content */
#content {
height:auto;
margin:0 auto;
padding:0 0 20px;
width:751px;
}
#content h1 {
border-bottom:1px dashed #999;
font-size:1.8em;
padding:20px 0 0;
}
#content p {
padding:20px 20px 0;
}


/* footer */
#footer {
border-top:1px solid #999; 
height:50px;
margin:0 auto;
padding:10px;
text-align:center;
width:751px;
}


/* Added by Larry Ullman: */
.error, .ad {
font-weight: bold;
color: #C00
}


input, select, .input {
padding: 5px;
font-weight: bold;
font-size: 1em;
color: #008040;
background: #FFFFFF;
border:1px dotted #004080;
}

最后

以上就是糊涂鸡为你收集整理的DIV+CSS导航栏的全部内容，希望文章能够帮你解决DIV+CSS导航栏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。