* {
	margin:0;
	padding:0;
	-moz-user-select:none;
	/*火狐*/
    -webkit-user-select:none;
	/*webkit浏览器*/
    -ms-user-select:none;
	/*IE10*/
    -khtml-user-select:none;
	/*早期浏览器*/
    user-select:none;
}
#box {
	width:350px;
	height:500px;
	margin:30px auto;
	border-radius:5px;
	box-shadow:0px 0px 27px -3px red;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	overflow:hidden;
	position:relative;
	background-color:#ccc;
}
.childbox {
	width:300%;
	height:100%;
	display:flex;
	position:absolute;
	top:0;
	left:0;
}
.childbox>div {
	flex:1;
	height:100%;
}
.child1 {
	background-color:salmon;
}
.child2 {
	background-color:greenyellow;
}
.child3 {
	background-color:blueviolet;
}
.nav_box {
	position:absolute;
	width:100%;
	text-align:center;
	line-height:50px;
}
.nav_box div {
	display:inline-block;
	color:#fff;
	margin:0 5px;
	position:relative;
}
.active_nav::before {
	content:'';
	position:absolute;
	background-color:#fff;
	left:2px;
	bottom:7px;
	width:27px;
	height:2px;
}
.childbox>div {
	position:relative;
}
.childbox>div .listview {
	width:100%;
	position:absolute;
}
.view_child {
	text-align:center;
	line-height:200px;
	color:#fff;
	font-size:25px;
}