使用div+css制作简单导航以及要注意问题

 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要设置其高度

使用div+css制作简单导航 以及要注意问题

使用div+css制作简单导航以及要注意问题