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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值