html,body {
	margin:0;
	padding:0;
}
.container {
	width:500px;
	height:300px;
	padding:0;
	margin:0 auto;
	position:relative;
	top:150px;
}
.top {
	height:40px;
}
.top ul {
	margin:0;
	padding:0;
	list-style:none;
	color:whitesmoke;
}
.top ul li {
	float:left;
	width:25%;
	text-align:center;
	line-height:40px;
	box-shadow:0 0 1px #ffba7d
}
.top ul li:nth-child(1) {
	background-color:#5ac7e7;
}
.top ul li:nth-child(2) {
	background-color:#a263ff;
}
.top ul li:nth-child(3) {
	background-color:#55ffb2;
}
.top ul li:nth-child(4) {
	background-color:#090908;
}
.bottom {
	height:252px;
	display:none;
}
.one {
	background-color:#5ac7e7;
}
.two {
	background-color:#a263ff;
}
.three {
	background-color:#55ffb2;
}
.four {
	background-color:#090908;
}
.active {
	display:block;
}
.text-no-select {
	-moz-user-select:none;
	/*火狐*/
    -webkit-user-select:none;
	/*webkit浏览器*/
    -ms-user-select:none;
	/*IE10*/
    user-select:none;
}