* {
	margin:0;
	padding:0;
}
body,html {
	width:100%;
	height:100%;
}
.bg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.bg-box-1 {
	background:url('img/1.jpg') no-repeat center/cover;
}
.bg-box-2 {
	background:url('img/2.jpg') no-repeat center/cover;
}
.bg-box-3 {
	background:url('img/3.jpg') no-repeat center/cover;
}
.bg-box-4 {
	background:url('img/4.jpg') no-repeat center/cover;
}
#wrap {
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	width:1000px;
	height:400px;
}
#wrap>ul {
	width:120%;
	list-style:none;
}
#wrap>ul>li {
	float:left;
	width:100px;
	height:400px;
	cursor:pointer;
}
#wrap>ul>li:nth-child(1) {
	background:url('http://www.jq22.com/img/cs/500x300-1.png') no-repeat center/cover;
}
/*
				 * 规定属于其父元素的第二个子元素的每个 p 的背景图片  center/cover让图片
				 * 在固定大小的盒子内全屏显示
 			*/
			
			#wrap>ul>li:nth-child(2) {
	background:url('http://www.jq22.com/img/cs/500x300-2.png') no-repeat center/cover;
}
/*
			 * 同上
			 */
			#wrap>ul>li:nth-child(3) {
	background:url('http://www.jq22.com/img/cs/500x300-3.png') no-repeat center/cover;
}
#wrap>ul>li:nth-child(4) {
	background:url('http://www.jq22.com/img/cs/500x300-4.png') no-repeat center/cover;
	/*
				 *最后一个略缩图要给它设置宽度  要不然不显示
				 * */
				width:700px;
}
#wrap>ul>li>.text {
	width:100px;
	height:100%;
	background:#000;
	opacity:.5;
}
#wrap>ul>li>.text p {
	padding:20px 40px;
	font-family:"微软雅黑";
	color:#fff;
}