* {
	margin:0;
	padding:0;
}
div.box {
	width:50vw;
	height:50vh;
	/* 利用flex布局，让ul和div处于同一水平列，除此之外float 也能做到这一点 */
            display:flex;
	/*  border:1px solid red;
	*/
            margin:10vh auto;
}
ul.list {
	width:10vw;
	height:50vh;
	/* 去除li前面的黑点 */
            list-style:none;
	/* 文字居中显示 */
            text-align:center;
}
ul.list>li {
	border:1px solid black;
	padding:1vh 0;
	/* 光标变成小手状 */
            cursor:pointer;
}
div.main {
	width:40vw;
	height:50vh;
}
.main1,.main2,.main3,.main4,.main5 {
	width:100%;
	height:100%;
	display:none;
}
img {
	width:100%;
	height:100%;
}
li.checked {
	background:red;
}
div.checked {
	display:block;
}