1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <link href="nav3.css" rel="stylesheet">
 7 </head>
 8 <body>
 9 <nav>
10   <ul>
11       <li class="left"></li>
12       <li><a href="">首页</a></li>
13       <li class="line"></li>
14       <li><a href="">公司简介</a></li>
15       <li class="line"></li>
16       <li><a href="">业务范围</a></li>
17       <li class="line"></li>
18       <li><a href="">客户留言</a></li>
19       <li class="line"></li>
20       <li><a href="">联系我们</a></li>
21       <li class="line"></li>
22       <li><a href="">在线业务</a></li>
23       <li class="line"></li>
24       <li><a href="">网上购物</a></li>
25       <li class="line"></li>
26       <li><a href="">意见反馈</a></li>
27       <li class="right"></li>
28   </ul>
29 </nav>
30 </body>
31 </html>
1 @charset "utf-8";
 2 /* CSS reset */
 3 
 4 * {
 5     margin: 0px;
 6     padding: 0px;
 7     border: 0px;
 8 }
 9 /*nac css*/
10 ul li {
11     list-style: none;
12     float: left;
13     
14 }
15 nav {
16     width: 1000px;
17     height: 48px;
18     background-image: url(images/nav_bg.gif);
19     margin: 20px auto;    /*让导航与顶部有20px空白*/
20 }
21 nav ul li a {
22     float: left;
23     width: 114px;  /*设置宽高和hover变化的图片一样的尺寸也可以控制文字在导航中的分布，必须要和float:left一块使用才起作用*/
24     height: 44px;
25     text-decoration: none;
26     color: #fff;
27     font-size: 16px;
28     font-weight: 800;
29     line-height: 38px;
30     text-align: center;
31     margin-top:10px;     /*和a:hover一样以防文字出现跳动*/
32 }
33 nav ul li a:hover {
34     background-image: url(images/nav_li_current.gif);
35     color: #000000;
36     margin-top:10px;  /*如果图片没有出现想要的位置可以控制图片和导航顶部的距离*/
37 }
38 
39 }
40 nav ul li.left {
41     background-image: url(images/nav_l_bg.gif);
42     width: 8px;
43     height: 48px;
44 }
45 nav ul li.right {
46      background-image:url(images/nav_r_bg.gif);
47      width:8px;
48      height:48px;
49      float:right;/*如果不能正常出现可以让他右对齐*/
50 }
51 nav ul li.line {
52     background-image: url(images/nav_li_right.gif);
53     width: 8px;
54     height: 48px;
55 }