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 }