圆角导航 - 爱码网

圆角导航

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>圆角导航</title>
 <link href="css/style.css" rel="stylesheet" />
</head>
<body>
 <div class="menu">
 <ul>
 <li><a href="#" class="cur">首页</a></li>
 <li><a href="#">首页首页</a></li>
 <li><a href="#">首页首</a></li>
 <li><a href="#">首页首页</a></li>
 <li><a href="#">首页首页</a></li>
 <li><a href="#">首页首页</a></li>
 <li><a href="#">首页首页</a></li>
 <li><a href="#">首页</a></li>
 <li><a href="#">首页首页首页</a></li>
 </ul>
 </div>
</body>
</html>

/*基本设置*/

body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符号*/
img{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
.clear{ clear:both;}
table{border-collapse:collapse;}
td{border:#000 solid 1px;}

.menu {
height:38px;
width:990px;
background:url(../images/nh06.jpg) no-repeat;
margin:30px auto
}
    .menu ul li {
    float:left;
    padding:0 6px;
    display:inline;
   background:url(../images/list.png) no-repeat right;
    }
        .menu a {
        display:block;
        float:left;
        height:31px;
        margin-top:7px;
       color:#fff;
        padding-left:14px;

        font-weight:bold
        }
            .menu a:hover,.menu .cur {
             background:url(../images/nav-left_y.jpg) no-repeat left;
              color:#1E8904;
            }

            .menu span{
            display:block;
            float:left;
            height:27px;
         padding-top:4px;
            padding-right:14px;
            }
                .menu a:hover span,.cur span{
                  background:url(../images/nav_right_y.png) no-repeat right;

                }