注意:该文章实现的导航效果是最基本的那种,没有加任何的js代码,纯粹使用html标签+css样式实现的。
html代码:
<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> </ul> </div>
css样式:
.nav{ height:80px; line-height:80px; background:#ededed; border-radius:0 0 15px 15px; } .nav li{ float:left; width:70px; text-align:center; } .nav a{ display:block; color:black; } .nav a:hover{ color:white; background:blue; }