body { background-color:#999; color:white; margin:0; padding:0; } /** * 包裹层分三部分,左边,中间,右边 */ .wrapper { width:80%; display:flex; margin:0 auto; text-align:center; } .wrapper-center { flex:3; position:relative; text-align:center; } .left { flex:1; } .right { flex:1; } /** * 左边 */ .blue-ul-column { display:flex; flex-direction:column; justify-content:space-around; height:300px; list-style:none; position:relative; top:50%; transform:translate(0,-50%); margin:10px 0; padding-inline-start:0px; } .blue-ul-column-left { padding-inline-start:40px; } .bluesky-left { display:inline-block; background:url(https://www.jq22.com/img/cs/500x500-2.png) no-repeat right -10px top 0 / 40px 40px,url(https://www.jq22.com/img/cs/500x500-1.png) no-repeat right 40px top 0 / 40px 40px; text-align:right; padding-top:10px; padding-right:100px; cursor:pointer; margin:5px 0; padding-bottom:10px; } /** * 右边 */ .bluesky-right { display:inline-block; background:url(https://www.jq22.com/img/cs/500x500-2.png) no-repeat 0px 0 / 40px 40px,url(https://www.jq22.com/img/cs/500x500-1.png) no-repeat 50px 0 / 40px 40px; text-align:left; padding-top:10px; padding-left:100px; cursor:pointer; margin:5px 0; padding-bottom:10px; } /** * 中间 */ .blue-ul { display:flex; list-style:none; width:100%; margin:0 auto; padding-inline-start:0; } .bluesky-top { width:100%; background:url(https://www.jq22.com/img/cs/500x500-2.png) no-repeat center 100px / 40px 40px,url(https://www.jq22.com/img/cs/500x500-1.png) no-repeat center 40px / 40px 40px; text-align:center; padding-top:10px; height:130px; cursor:pointer; } .bluesky-down { width:100%; background:url(https://www.jq22.com/img/cs/500x500-1.png) no-repeat center 70px / 40px 40px,url(https://www.jq22.com/img/cs/500x500-2.png) no-repeat center 10px / 40px 40px; text-align:center; padding-top:120px; cursor:pointer; } /** * 中间桌子背景 */ .desk { width:100%; height:300px; background:url(https://www.jq22.com/img/cs/500x300-2.png) no-repeat center center / 100% 100%; margin-top:-50px; margin-bottom:-60px; margin-left:-30px; padding-right:70px; position:relative; z-index:-1; }
更新时间:2020-11-06 09:33:57
修改方形桌的数回自适应间距