做的妙味的一个课后作业:比较笨的js,不过遮罩层很好实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>热身课后练习1</title> <link rel="stylesheet" type="text/css" href="afterClass.css"> </head> <body> <div id="bar"> <h1>请为下面的DIV设置样式:</h1> <h3 id="h3">点击设置</h3> </div> <div id="box" class="box"></div> <div class="bg" id="bg"></div> <div id="center_box" class="center_box"> <div> <ul> <li id="li1"> <strong>请选择背景色:</strong> <div class="color_box"></div> <div class="color_box"></div> <div class="color_box"></div> </li> <li id="li2"> <strong>请选择宽度: </strong> <div class="color_box">200px</div> <div class="color_box">300px</div> <div class="color_box">400px</div> </li> <li id="li3" style="margin: 0;"> <strong>请选择高度: </strong> <div class="color_box">200px</div> <div class="color_box">300px</div> <div class="color_box">400px</div> </li> </ul> </div> <div> <input id="reset" type="button" value="恢复" οnclick="resetx()"> <input id="submit" type="button" value="确定" οnclick="submitx()"> </div> </div> <script> var box=document.getElementById("box"); var center_box=document.getElementById("center_box"); var h3=document.getElementById("h3"); var bg=document.getElementById("bg"); // var small_box=document.getElementById("li1").getElementsByTagName("div"); var small_box=document.getElementsByClassName("color_box"); small_box[0].onclick=function () { box.style.backgroundColor="red"; } ; small_box[1].onclick=function () { box.style.backgroundColor="yellow"; } ; small_box[2].onclick=function () { box.style.backgroundColor="blue"; } ; small_box[3].onclick=function () { box.style.width="200px"; } ; small_box[4].onclick=function () { box.style.width="300px"; } ; small_box[5].onclick=function () { box.style.width="400px"; } ; small_box[6].onclick=function () { box.style.height="200px"; } ; small_box[7].onclick=function () { box.style.height="300px"; } ; small_box[8].onclick=function () { box.style.height="400px"; } ; var reset=document.getElementById("reset"); var submit=document.getElementById("submit"); function resetx() { box.style.backgroundColor="gray"; box.style.width="200px"; box.style.height="200px"; } function submitx() { center_box.style.display="none"; bg.style.display="none"; } h3.onclick=function () { center_box.style.display="block"; bg.style.display="block"; } </script> </body> </html>
/**{*/ /*margin: 0;*/ /*padding: 0;*/ /*}*/ #bar{ /*float: left;*/ height: 50px; } h1,h3{ margin: 0; padding: 0; height:50px; line-height:50px; /*text-align: center;*/ float: left; } .box{ float: left; background: gray; width:200px; height: 200px; border:1px black solid; } .bg{ position: absolute; width: 100%; height: 100%; z-index: 1; opacity:0.5; background-color: black; display: none; } .center_box{ position: absolute; left: 400px; top: 60px; float: left; margin-left: 20px; border: solid darkgray 15px; text-align: center; width: 300px; height: 200px; background: white; display: none; z-index: 2; } .center_box ul{ /*margin: 0;*/ padding: 0; margin-left: 20px; } .center_box ul>li{ text-align: left; /*width: 40%;*/ padding: 0; margin-bottom:20px; height: 30px; line-height:30px; } .center_box input{ background: cadetblue; } .center_box strong{ float: left; height: 30px; line-height:30px; } .center_box ul{ float: left; } .color_box{ width: 30px; height: 30px; float: left; /*background: #000;*/ line-height:30px; margin-left: 10px; font-size:10px; } .color_box:nth-of-type(1){ background: red; } .color_box:nth-of-type(2){ background: yellow; } .color_box:nth-of-type(3){ background: blue; } .center_box ul li:nth-of-type(2) .color_box{ background: darkgray; } .center_box ul li:nth-of-type(3) .color_box{ background: darkgray; } .center_box input{ width: 50px; /*float: left;*/ }