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
修改方形桌的数回自适应间距