网页顶部横向导航栏的制作(最最基本的导航栏)

最新推荐文章于 2024-05-19 09:58:49 发布

考拉的墨尔本

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量2.5w

点赞数 3

文章标签： web前端菜鸟入门 css html 导航栏

本文链接：https://blog.csdn.net/yaojxing/article/details/70147510

版权

注意：该文章实现的导航效果是最基本的那种，没有加任何的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;
}