使用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)