古风弓鞋
* { margin:0; padding:0; } /*body,html { width:100%; height:100%; } */ #five { width:100%; } .bg { position:absolute; top:0; left:0; width:100%; height:500px; overflow:hidden; } .bg-box-1 { background:url('http://www.jq22.com/img/cs/500x300-1.png') no-repeat center/cover; } .bg-box-2 { background:url('http://www.jq22.com/img/cs/500x300-2.png') no-repeat center/cover; } .bg-box-3 { background:url('http://www.jq22.com/img/cs/500x300-3.png') no-repeat center/cover; } .bg-box-4 { background:url('http://www.jq22.com/img/cs/500x300-4.png') no-repeat center/cover; } #wrap { position:absolute; overflow:hidden; top:250; 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-5.png') no-repeat center/cover; } #wrap > ul > li:nth-child(2) { background:url('http://www.jq22.com/img/cs/500x300-6.png') no-repeat center/cover; } #wrap > ul > li:nth-child(3) { background:url('http://www.jq22.com/img/cs/500x300-7.png') no-repeat center/cover; } #wrap > ul > li:nth-child(4) { background:url('http://www.jq22.com/img/cs/500x300-8.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:'Microsoft yahei'; color:#fff; }
更新时间:2019-12-31 00:56:37