这是菜单的内容，用div标签实现菜单：也可调为ul↓

 

  type="angel-tab">
	
  

    type="angel-menu">
		
   
 
              type="m1">技术文章 
              type="m2">个人心得 
            
	
  
	
  

		
   

    type="body1">
			
    

                           
     

			
    
		
   
		
   

     type="body2">
			
    

                           
     

			
    
		
   
	
  

 

这是CSS控制代码↓：

/* 浮动 */
.fl {
	float:left;
}
.fr {
	float:right;
}
/* 外边距 */
.mt10 {
	margin-top:10px;
}
.ml10 {
	margin-left:10px;
}
.mb10 {
	margin-bottom:10px;
}
.mr10 {
	margin-right:10px;
}
/*自定义宽度*/

.w350 {
	width:350px;
}

.w710 {
	width:710px;
}
/* 公用滑动门模块mode_tab */
.mode_tab {
	height:220px;
}
.mode_tab .tab_hd {
	height:31px;
	background:url(Images/back.png) no-repeat -360px -90px;
	padding-left:7px;
}
.mode_tab .tab_hd a {
	display:block;
	float:left;
	height:31px;
	width:101px;
	background:url(Images/back.png) no-repeat -140px -90px;
	text-align:center;
	line-height:28px;
	color:#fff;
	font-weight:bold;
}
.mode_tab .tab_hd a:hover {
	color:#f6ff00;
	text-decoration:none;
}
.mode_tab .tab_hd a.tab_active {
	background-position:-250px -90px;
	color:#f6ff00;
}
.mode_tab .tab_bd {
	height:187px;
	border:solid 1px #7f453f;
	border-top:0px;
	background:url(Images/mode_right_bd.png) repeat-x 0 0;
	padding:1px 10px 0 10px;
}
/* 全站通用列表 */
.aticleListTab li {
	display:block;
	height:25px;
	line-height:25px;
	border-bottom:dotted 1px #a3a3a3;
}
.aticleListTab li span {
	float:right;
	color:#999;
fo
}
.aticleListTab li a {
	display:block;
	text-indent:15px;
	background:url(Images/icon_2.gif) no-repeat 1px 8px;
}
.aticleListTab li a:hover {
	color:#e10000;
	text-decoration:none;
}

这是JS的控制代码：↓

*看起来貌似很多的。全站只要一次就够了！放在最底下OK

演示程序在这里演示程序

下载程序在：点击这里下载