动态导航案例2
导航效果:
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{margin:0;padding:0;}
ul,li{list-style: none;}
a{text-decoration: none;}
/*nav2*/
.nav2{
width: 480px;
height: 44px;
margin:100px auto;
background:url(images/nav2_ul.jpg) repeat-x 0px bottom;
}
.nav2 li{
float: left;
margin:0px 5px;
}
.nav2 a{
display: block;
height: 44px;
line-height: 44px;
padding:0px 15px;
font-size: 8px;
color:#857264;
/*border:1px solid red;*/
font-weight: 800;
}
.nav2 a:hover{
background:url(images/nav2_a.jpg) repeat-x;
color:pink;
}
</style>
</head>
<body>
<ul class="nav2">
<li><a href="#">SAMPLE</a></li>
<li><a href="#">SAMPLE</a></li>
<li><a href="#">SAMPLE</a></li>
<li><a href="#">SAMPLE</a></li>
<li><a href="#">SAMPLE</a></li>
</ul>
</body>
</html>
除了这种动态导航以外还有其他动态导航案例如下:
总结
以上是对前端制作动态导航的小总结,后期将继续更新html基础知识点
文章为原创内容,要是遇到有不合适的地方欢迎赐教🙌