提供一个静态的页面样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: rgb(223, 231, 231);
}
.wrap button{
width: 120px;
height: 40px;
font: bold 16px/40px "宋体";
text-align: center;
color: #fff;
background: red;
border: none;
padding: 0;
margin: 0;
margin-left: 20px;
}
#box{
width: 100px;
height: 100px;
background: #fff;
border: 4px solid #000;
}
.mask{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0,0,0,.5);
/*display: none;*/
}
.select{
width: 400px;
height: 260px;
background: #fff;
border: 20px solid #999;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -130px;
}
ul{
list-style: none;
margin: 0;
padding: 10%;
}
.setList li{
height: 30px;
font: 14px / 30px "宋体";
margin-top: 10px;
}
.setList span{
float: left;
}
.setList span:not(.title){
width: 40px;
height: 30px;
border: 1px solid #000;
margin: 0 5px;
text-align: center;
background: #e7e2e286;
color: #333;
}
#red{
background: red;
}
#yellow{
background: orange;
}
#blue{
background: skyblue;
}
.setList li:first-of-type span:not(.title){
color: #fff;
}
.select button{
width: 80px;
height: 30px;
font: 14px / 30px "宋体";
color: #fff;
text-align: center;
background: rgb(63, 47, 153);
border: none;
}
.select button:first-of-type{
margin-left: 28%;
}
</style>
</head>
<body>
<div class="wrap">
<h2>请为下面的div设置样式:<button>点击设置</button></h2>
<div id="box">
</div>
</div>
<div class="mask">
<div class="select">
<ul class="setList">
<li>
<span class="title">请选择颜色:</span>
<span id="red">红</span>
<span id="yellow">黄</span>
<span id="blue">蓝</span>
</li>
<li>
<span class="title">请选择宽(px):</span>
<span id="w200">200</span>
<span id="w300">300</span>
<span id="w400">400</span>
</li>
<li>
<span class="title">请选择高(px):</span>
<span id="h200">200</span>
<span id="h300">300</span>
<span id="h400">400</span>
</li>
</ul>
<button>恢复</button>
<button>确认</button>
</div>
</div>
</body>
</html>
功能开发
1.点击设置按钮,弹出设置页面
前端效果
2.揉捏div
揉捏div,对当前的div设置样式,背景色、宽、高,当前的,本次的点击事件,添加给入下区域