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

原创于 2017-04-12 21:03:50 发布 · 2.5w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#web前端菜鸟入门 #css #html #导航栏

本文介绍如何仅使用HTML和CSS创建一个简单的导航栏效果，不涉及JavaScript，适用于前端初学者了解网页布局的基本原理。

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