mui选项卡可滑动

如图：

引入的文件可自己去mui官方网站下载（mui.min.css最好放在最前面，以免自己的样式在前被mui自带的样式所覆盖

a.html

	
	
	 
	 

	
	
	

	
	

	
	

	


	



		

			

				

					


						
							视频
						
						
							笔记
						
							作业
						

					
				


				

					
					


						

							


								

									

										
1
										

											
课程课程课程课程课程课程课程
											2018.10.3-15:30
										
									

									

										
2
										

											
课程课程课程课程课程课程课程
											2018.10.3-15:30
										
									
		
								


							
						
 
					

					
					


						

							


								

									

										
3
										

											
课程课程课程课程课程课程课程
											2018.10.3-15:30
										
									

									

										
4
										

											
课程课程课程课程课程课程课程
											2018.10.3-15:30
										
									
		
								


							
						
 
					
					
					


						

							


								

									

										
5
										

											
课程课程课程课程课程课程课程
											2018.10.3-15:30
										
									

									

										
6
										

											
课程课程课程课程课程课程课程
											2018.10.3-15:30
										
									
		
								


							
						
 
					
					

				

			
	


		



	

a.css

/* 顶部导航 */
.top_nav{
	display: block;
	height:1.375rem;
	line-height: 1.375rem;
	font-size: 0.48rem;
	width: 100%;
	background: rgb(224, 224, 224);
	margin-bottom: 0.3125rem;
}
.top_nav a{
	text-decoration: none;
}

.top_nav span{
	height: 100%;
	line-height:  1.375rem;
	text-align: center;
}

.class_box{
	width: 100%;
	padding: 0 0.3125rem;
	background: #FFF;

}

.item{
	width: 100%;
	height: 2rem;
	font-size: 0.4375rem;
	border-bottom: 1px solid #ccc;

}

.item:nth-child(even)>.index{
	width: 10%;
	height: 100%;
	line-height: 2rem;
	text-align: center;
	background: blue;

}
.item:nth-child(odd)>.index{
	width: 10%;
	height: 100%;
	line-height: 2rem;
	text-align: center;
	background: #fe5462;

}
.concent{
	padding: 0.3rem;
	width: 90%;
	height: 100%;
	line-height: 0.75rem;	

}
.concent span{
	font-size: 0.375rem;
}