HTML侧边栏菜单

HTML侧边栏菜单

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

HTML：

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

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

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

div就是一块区域，并且可以嵌套使用，侧边菜单栏的就是一个长方形的

里面有n个小的