ul {
	margin: 0;
	padding: 0;

}

.clearfloat {
	zoom: 1;
}

.clearfloat::after {
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}

.tab-list {
	position: relative;
}
.tab-itom{
	width: 32%;
}
.tab-list .tab-itom {
	float: left;
	list-style: none;
	margin-right: 1.3%;
}

.tab-itom .test-label {
	position: relative;
	width: 100%;
	height: 42px;
	color: #000000;
font-size:18px;
font-weight: bold;
	/* border: 1px solid transparent; */
	/* border-top-left-radius: 5px; */
	/* border-top-right-radius: 5px; */
	line-height: 42px;
	text-align: center;
}

.tab-itom .tab-box {
	/* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
	position: absolute;
	left: 0;
	top: 50px;
	width: 100%;
	/* height: 248px; */
	/* border: 1px solid #cbcccc; */
	border-radius: 5px;
	border-top-left-radius: 0px;
	background: #fff;
	/* 设置层级最低方便选中状态遮挡 */
	z-index: 0;
}

/* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
input[type="radio"] {
	position: absolute;
	opacity: 0;
}

/* 利用选择器实现  tab切换 */

/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
input[type="radio"]:checked+.test-label {
	/* 为了修饰存在的边框背景属性 */
	/* border-color: #cbcccc; */
	/* border-bottom-color: #EF0000; */
color: #0B6CB8;
	/* 为了修饰存在的层级使下边框遮挡下方div的上边框 */
	z-index: 10;
}

/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked~.tab-box {
	/* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
	z-index: 5;
}