Html
    Css
    Js

    
                        
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;
}

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

css座位桌牌布局代码 (原创)

更新时间:2020-11-06 09:33:57

修改方形桌的数回自适应间距

0