导航制作方法总结之二

这是制作导航另外一种办法，这种方法比上篇文章中提到的制作导航的方法要好一点，有需要的，可以收藏，借鉴，当然，不可避免的还会瑕疵存在，希望路过大神批评指正。

<style type="text/css">
  .nav *{
  margin: 0px;
  padding: 0px;
  }
  .nav{
  text-align: center;
  }
  .nav li{
  list-style-type: none;
  float: left;
   
  }
  .nav a{
  text-decoration: none;
  width: 100px;
  padding: 12px 10px;
  color: black;
  display: block;
  }
  .nav a:hover{
  color: red;
  font-weight: bold;
  }
  .nav li:hover{
  background: yellow;
  }
  </style>
  </head>
  <body>
  <div class="nav">
  <ul>
  <li><a href="#">最新动态</a></li>
  <li><a href="#">重要通知</a></li>
  <li><a href="#">软件下载</a></li>
  <li><a href="#">联系我们</a></li>
  <li><a href="#">重要通知</a></li>
  <li><a href="#">软件下载</a></li>
  <li><a href="#">联系我们</a></li>
  </ul>
  </div><br />
  <div style="font-size: 46px;color: red; text-align: center; margin-top: 300px;">第二种写导航的方法</div>
posted @ 2017-03-14 21:53  有深度  阅读(186)  评论(0)    收藏  举报