Html
    Css
    Js
* {
	padding:0;
	margin:0;
	font-family:"微软雅黑";
	list-style-type:none;
}
body {
	width:1200px;
}
a {
	text-decoration:none;
}
.pic {
	width:100%;
	height:400px;
	margin-top:70px;
}
.pic ul li {
	float:left;
	width:100px;
	height:399px;
}
.pic1 {
	background-image:url("http://www.jq22.com/img/cs/500x300a.png");
}
.pic2 {
	background-image:url("http://www.jq22.com/img/cs/500x300b.png");
}
.pic3 {
	background-image:url("http://www.jq22.com/img/cs/500x300c.png");
}
.pic4 {
	background-image:url("http://www.jq22.com/img/cs/500x300d.png");
}
.pic ul .pic5 {
	background-image:url("http://www.jq22.com/img/cs/500x300e.png");
	width:800px;
}
.txt {
	background-color:#000;
	background:rgba(0,0,0,0.5);
	height:399px;
	width:100px;
}
.txt p {
	float:left;
	color:#fff;
}
.txt .p1 {
	font-size:12px;
	width:12px;
	padding:25px 25px 0px 20px;
}
.txt .p2 {
	font-size:14px;
	width:14px;
	margin-top:25px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

简单手风琴图片展示

基础js,简单,易学

0