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=gb2312" /> 5 6 <style type="text/css"> 7 8 9 #headNav { 10 width:960px; 11 height:30px; 12 line-height:30px; 13 background-color: lightblue; 14 margin:0 auto; 15 } 16 17 #headNav ul { 18 list-style:none; 19 } 20 21 #headNav ul li { 22 float:left; 23 height: 30px; 24 line-height: 30px; 25 padding:0 10px; 26 } 27 28 #headNav ul li:hover { 29 background-color: white; 30 } 31 32 a { 33 color:red; 34 text-decoration:none; 35 } 36 37 a:hover { 38 39 } 40 </style> 41 42 </head> 43 <body> 44 <div id="headNav"> 45 <ul> 46 <li><a href="#">首页</a></li> 47 <li><a href="#">网页版式布局</a></li> 48 <li><a href="#">div+css教程</a></li> 49 <li><a href="#">div+css实例</a></li> 50 <li><a href="#">常用代码</a></li> 51 </ul> 52 </div> 53 </body> 54 </html>
注意：
①第12行即导航的div要设置其高度