css 导航栏

浏览数：17 / 时间：2015年06月09日
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>导航栏</title>
  6. <link rel="stylesheet" type="text/css" href="../css/reset.css"/>
  7. <style type="text/css">
  8. .nav{
  9. width: 100%;
  10. height: 40px;
  11. background: #000000;
  12. line-height: 20px;
  13. text-align: center;
  14. }
  15. .nav ul{
  16. display: inline-block;
  17. }
  18. .nav ul li{
  19. display: inline-block;
  20. width: 60px;
  21. padding:10px;
  22. text-align: center;
  23. color: #fff;
  24. }
  25. .nav ul li a{
  26. color: #fff;
  27. }
  28. /**
  29. * first-child 获得第一个元素
  30. * IE6、IE7不支持 first-child 属性
  31. * */
  32. .nav ul li:first-child{
  33. background: dodgerblue;
  34. }
  35. .nav ul li:hover{
  36. background: dodgerblue;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <nav class="nav">
  42. <ul>
  43. <li><a href="">home</a></li><li><a href="">home</a></li><li><a href="">home</a></li><li><a href="">home</a></li><li><a href="">home</a></li>
  44. </ul>
  45. </nav>
  46. </body>
  47. </html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style html it la sp ha as res class style html it la sp ha as res

相关文章

随机文章

您可能还喜欢

您可能还喜欢