CSS - 导航栏

水平导航栏(头部导航栏):

头部导航栏1.jpg

图1

头部导航栏2.jpg

图2

头部导航栏3.jpg

图3

垂直导航栏(侧边栏):

侧边栏1.jpg

图4

侧边栏2.jpg

图5

CSS - 导航栏 = 链接列表

导航条基本上是一个链接列表,所以使用 <ul> 和 <li>元素非常有意义:

<ul class="">
	<li><a href="">首页</a></li>
	<li class="active"><a href="">资讯</a></li>
	<li><a href="">课程</a></li>
</ul>

class="active" 表示选中状态的样式

CSS - 水平导航栏

list-style: none; 去除列表前小标志。padding: 0 10px; 填充内边距。水平导航栏则添加浮动 :

li{
	float: left;
	list-style: none;
	padding: 0 10px;
}

CSS - 水平导航栏 & 清除浮动

大多数水平导航栏需要使用到浮动,为了页面排版,需要清除浮动。 给父元素添加 class="clear" 来清除浮动 :

.clear::after {
	display: block;
	content: "";
	clear: both;
}

CSS - 导航栏选中 & hover

class="active" 选中状态给予 background-color 。鼠标移上去(hover)给予 color 变化 :

li.active{
	background-color: #5F9EA0;
}
li.active a{
	color: #fff;
}
a:hover{
	color: #5F9EA0;
}

CSS - 垂直导航栏

垂直导航栏多为侧边栏。需要给 <a> 元素设置宽度则需要设置 display: inline-block;

.sidebar a{
	width: 100px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	color: #333333;
	text-decoration: none;
}
.sidebar li.active a{
	background: #ff5b36;
	color: #fff;
	border-radius: 5px;
}

图1代码

图2代码

图3代码

图4代码

图5代码