HTML侧边栏菜单

HTML侧边栏菜单

用div做一个侧边菜单栏样式，没有导航功能，还没学会，大家不要介意。

HTML：

<div class="sidebar">
	<div class="tab"  id="cate0"><i class="reorder"></i> 全部教程</div>
 	<div class="design" id="cate1">
		<div class="navto-nav"><i class="imooc-icon"></i> HTML / CSS</div>
	</div>
	<div class="design" id="cate2">
		<div class="navto-nav"><i class="imooc-icon"></i> JavaScript</div>
	</div>
	<div class="design" id="cate3">
		<div class="navto-nav"><i class="imooc-icon"></i> 服务端</div>
	</div>
	<div class="design" id="cate4">
		<div class="navto-nav"><i class="imooc-icon"></i> 数据库</div>
	</div>
	<div class="design" id="cate5">
		<div class="navto-nav"><i class="imooc-icon"></i> 移动端</div>
	</div>
	<div class="design" id="cate6">
		<div class="navto-nav"><i class="imooc-icon"></i> XML 教程</div>
	</div>
	<div class="design" id="cate7">
		<div class="navto-nav"><i class="imooc-icon"></i> ASP.NET</div>
	</div>
	<div class="design" id="cate8">
		<div class="navto-nav"><i class="imooc-icon"></i> Web Service</div>
	</div>
	<div class="design" id="cate9">
		<div class="navto-nav"><i class="imooc-icon"></i> 开发工具</div>
	</div>
	<div class="design" id="cate10">
		<div class="navto-nav"><i class="imooc-icon"></i> 网站建设</div>
	</div>
</div>

CSS:

.sidebar{
	width:175px;
	border-color: #fffffff;
}
.tab{
	font-size:12px;
	height:27px;
	width:175px;
	background: #eeeeee;
	line-height: 27px; /*把line-height高度设置和height一样就可以让字体垂直居中*/
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #efefef;
	border-radius:2px 2px 0px 0px;
}
.reorder{
	margin-left:10px;
	content: url(tap.png);
}
.navto-nav{
	font-size:12px;
	height:45px;
	width:175px;
	background: #fbfbfb;
	line-height: 45px; /*把line-height高度设置和height一样就可以让字体垂直居中*/
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: #efefef;
}
.imooc-icon{
	margin-left:10px;
	content: url(icon.png);
}

效果图：

知识点：

1. 让文字在<div>中垂直居中的方法：设置line-height值跟height一样。
2. border-width 边框像素值：top right bottom left
3. border-radius 边框圆角值：top right bottom left
4. 用<i>标签添加icon(图标)，标签添加类选择器，代码格式为：imooc-icon{margin-left:10px;content: url(icon.png);}

border-style	值
dotted	点状
solid	实线
double	双实线
dashed	虚线

div就是一块区域，并且可以嵌套使用，侧边菜单栏的就是一个长方形的<div>里面有n个小的<div>