CSS导航菜单设计-优快云博客

<html>
<head><title>边延兵的CSS导航测试</title>
<style type="text/css">
body, div, ul, li{
margin:0;
padding:0;
font-style: normal;
font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif
}
ol, ul ,li{
list-style:none
}
body{
color:#000000;
background:#FFF;
text-align:left; //设置文字整体的对齐方式
}
a{
color:#000000;
text-decoration:none;
}
a:hover{
color:#BA2636
}
ul#nav{ //ul#nav设置只对此处的ul起作用
width:80%; //设置导航条的宽度
height:50px;
background:#00A2CA;
margin:5 auto; //可设置与顶部的距离
}
ul#nav li{
height:50px;
display:inline;
}
ul#nav li a{
width:100px; //设置每个块的宽度
display:inline-block;
padding:0 20px;
height:50px;
line-height:50px;
color:#FFF;
font-family:"\5FAE\8F6F\96C5\9ED1";
font-size:16px;
text-align:center;
}
ul#nav li a:hover{
background:url("b.png");
}
</style>
</head>

<body>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">HTML教程</a></li>
<li><a href="#">CSS基础</a></li>
<li><a href="#">CSS开发工具</a></li>
<li><a href="#">CSS特效</a></li>
<li><a href="#">CSS问题</a></li>
</ul>
</body>

</html>

CSS 实现导航条