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