Ul li 横排 菜单

 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>CSS练习</title>

 6  <style type="text/css"> 

 7      #nav{

 8          width:400px;·/* 控制导航总宽度 */ 

 9      }

10      

11      /* 取消列表样式,内外补间为零 */

12      #nav ul{

13          list-style:none;

14          margin:0;

15          padding:0;

16      }

17      

18      /* 横排:控制导航高度 ,使用float 指定每个li的宽度和高度 */

19      #nav li{

20          float:left;

21          width:100px;

22          height:30px;

23          line-height:30px;  /* 文字垂直居中 指定行高为li高度 自动垂直居中 */     

24      }

25      

26      /* 将a标签区块化就可以指定高度 */

27      #nav a{

28          display:block;

29          height:100%;

30          text-decoration:none;   /* 取消a标签下划线 */

31          text-align:center;      /* 文字水平居中显示 */

32          background-color:#000;

33          color:#fff;

34      }

35      

36      /* 鼠标放上效果 */

37      #nav a:hover{

38          background-color:#eee;

39          color:#000;

40      }

41  </style>

42 </head>

43 

44 <body>  

45     <div id="nav">

46         <ul>

47             <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">首页</a></li>

48             <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">个人介绍</a></li>

49             <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">作品展示</a></li>

50             <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">联系我们</a></li>

51         </ul>

52     </div>  

53 </body>

54 </html>

 

你可能感兴趣的:(菜单)