学习http://www.blueidea.com/tech/web/2007/4545_2.asp
代码试验
html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <link rel="stylesheet" type="text/css" href="2.css"> 7 </head> 8 9 <body> 10 <ul id="nav"> 11 <li> 12 <a href="#">Home</a> 13 </li> 14 15 <li> 16 <a href="#">About Us</a> 17 </li> 18 19 <li> 20 <a href="#">Services</a> 21 </li> 22 23 <li> 24 <a href="#">Clients</a> 25 </li> 26 27 <li> 28 <a href="#">Contacts</a> 29 </li> 30 </ul> 31 32 </body> 33 </html>
css
1 * { 2 margin: 0px; 3 padding: 0px; 4 } 5 #nav { 6 background:url(4.png) repeat-y; 7 width: 200px; 8 overflow: hidden; 9 } 10 #nav li { 11 height: 35px; 12 width: 190px; 13 padding-top:15px; 14 } 15 16 #nav a { 17 background:#60758C no-repeat left center; 18 text-decoration: none; 19 height: 30px; 20 width: 155px; 21 display: block; <!--让链接以块状方式呈现--> 22 float: right; 23 padding: 0px 0px 0px 5px; 24 font-weight: bold; 25 font-size: 15pt; 26 line-height: 30px; 27 color:#FFF; 28 border-left:10px solid #F66; <!--组装黄色修饰块盒子(a的左边框，如果又独立用一个盒子来做就不科学了，因为此方法最简单)，直接给a加入下面一条样式即可--> 29 } 30 31 #nav a:hover { 32 background: #00A8D5; <!--鼠标移到链接上时，链接风格的改变指定一个样式--> 33 color: #FFFFFF; 34 }
显示结果
