<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <meta name="viewport" content="width=device-width, initial-scale=."> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .set_bg_con{ width:px; height:px; border:px solid #ddd; margin:px auto ; background-color:#fff } .set_text{ line-height:px; float:left; margin: px px; color:#; } .style,.style,.style,.style,.style,.style{ width:px; height:px; float:left; margin:px px; background: gold; cursor:pointer; } .style{ background:#cc; } .style{ background:#bf; } .style{ background:#ef; } .style{ background:#fc; } .style{ background:#e; } .style{ background:#eeb; } </style> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('c'); var oBtn = document.getElementById('c'); var oBtn = document.getElementById('c'); var oBtn = document.getElementById('c'); var oBtn = document.getElementById('c'); var oBtn = document.getElementById('c'); var oBody = document.getElementById('body') oBtn.onclick = function(){ oBody.style.backgroundColor = '#cc'; } oBtn.onclick = function(){ oBody.style.backgroundColor = '#bf'; } oBtn.onclick = function(){ oBody.style.backgroundColor = '#ef'; } oBtn.onclick = function(){ oBody.style.backgroundColor = '#fc'; } oBtn.onclick = function(){ oBody.style.backgroundColor = '#e'; } oBtn.onclick = function(){ oBody.style.backgroundColor = '#eeb'; } } </script> </head> <body id="body"> <div class="set_bg_con"> <div class="set_text">请选择网页的背景色：</div> <div class="style" id="c"></div> <div class="style" id="c"></div> <div class="style" id="c"></div> <div class="style" id="c"></div> <div class="style" id="c"></div> <div class="style" id="c"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <meta name="viewport" content="width=device-width, initial-scale=."> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .set_con{ width:px; height:px; border:px solid #; margin:px auto ; } .left_set{ width:px; float:left; height:px; border-right:px solid #; padding-top:px; } .left_set label{ float:left; width:px; height:px; line-height:px; text-align:left; text-indent:px; margin-top:px; font-size:px; } .left_set input{ padding:px; width:px; height:px; border: px solid #; float:left; margin-top:px; text-indent:px; outline:none; } .left_set .setbtn{ width:px; height:px; border:px; background:#cc; color:#fff; text-indent:px; margin-left:px; font-size:px; margin-top:px } .right_show{ width:px; height:px; float:left; overflow:auto; } .box{ width:px; height:px; border: px solid #; background:gold; margin:px auto ; } </style> <script type="text/javascript"> window.onload = function(){ var oInput = document.getElementById('input'); var oInput = document.getElementById('input'); var oInput = document.getElementById('input'); var oInput = document.getElementById('input'); var oInput = document.getElementById('input'); var oBtn = document.getElementById('input'); var oBox = document.getElementById('box'); oBtn.onclick = function(){ var sVal = oInput.value; var sVal = oInput.value; var sVal = oInput.value; var sVal = oInput.value; var sVal = oInput.value; oBox.style.width = sVal; oBox.style.height = sVal; oBox.style.backgroundColor = sVal; oBox.style.border = sVal; oBox.style.borderRadius = sVal; } } </script> </head> <body> <div class="set_con"> <div class="left_set"> <label>宽度：</label> <input type="text" value="px" id="input"> <label>高度：</label> <input type="text" value="px" id="input"> <label>背景色：</label> <input type="text" value="gold" id="input"> <label>边框：</label> <input type="text" value="px solid #" id="input"> <label>圆角：</label> <input type="text" value="px" id="input"> <input type="button" value="设 置" class="setbtn" id="input"> </div> <div class="right_show"> <div class="box" id="box"></div> </div> </div> </body> </html>
