按钮式tab选项卡

用layui实现按钮式的tab选项卡
因为layui里没有按钮式的tab选项卡，所以需要调layui的css里的样式，让我们实现按钮式的tab选项卡
不需要外边框，加layui-tab-brief设定简洁风格

@* tab 选项卡 *@

   

		

			
【1】
			
【2】
			
【3】
			
【4】
		
	    @* 选项卡 内容 *@
		

			
1
			
2
			
3
			
4
		
	 

没有改改样式的效果

/*tab 选项卡*/
//去掉下边长灰色线
.layui-tab-title {
	border: none;
}

//给tab选项加背景颜色，5个像素的圆角，每个选项隔开，字体为白式
.layui-tab-title li {
	background-color: #5cb85c;
 	border-radius: 5px; 
	margin-left: 10px;
	color: white;
}

//去选中选项的下边线
.layui-tab-brief > .layui-tab-title .layui-this:after {
	border: none;
}

//选中后，背景颜色改变，5个像素的圆角
.layui-tab-title .layui-this {
	background-color: #f0ad4e;
	border-radius: 5px;
}

//选中后，字体为白色
.layui-tab-brief > .layui-tab-title .layui-this {
	color: white;
}

//改变后