1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style type="text/css">
9 .set_bg_con{
10 width:440px;
11 height:40px;
12 border:1px solid #ddd;
13 margin:40px auto 0;
14 background-color:#fff
15 }
16 .set_text{
17 line-height:40px;
18 float:left;
19 margin:0 20px 0 10px;
20 color:#666;
21 }
22 .style01,.style02,.style03,.style04,.style05,.style06{
23 width:30px;
24 height:26px;
25 float:left;
26 margin:8px 5px;
27 background: gold;
28 cursor:pointer;
29 }
30 .style01{
31 background:#0181cc;
32 }
33 .style02{
34 background:#00b9f1;
35 }
36 .style03{
37 background:#ef8201;
38 }
39 .style04{
40 background:#8fc320;
41 }
42 .style05{
43 background:#e84191;
44 }
45 .style06{
46 background:#ee87b4;
47 }
48 </style>
49 <script type="text/javascript">
50
51 window.onload = function(){
52 var oBtn01 = document.getElementById('c01');
53 var oBtn02 = document.getElementById('c02');
54 var oBtn03 = document.getElementById('c03');
55 var oBtn04 = document.getElementById('c04');
56 var oBtn05 = document.getElementById('c05');
57 var oBtn06 = document.getElementById('c06');
58 var oBody = document.getElementById('body01')
59
60 oBtn01.onclick = function(){
61 oBody.style.backgroundColor = '#0181cc';
62 }
63
64 oBtn02.onclick = function(){
65 oBody.style.backgroundColor = '#00b9f1';
66 }
67
68 oBtn03.onclick = function(){
69 oBody.style.backgroundColor = '#ef8201';
70 }
71
72 oBtn04.onclick = function(){
73 oBody.style.backgroundColor = '#8fc320';
74 }
75
76 oBtn05.onclick = function(){
77 oBody.style.backgroundColor = '#e84191';
78 }
79
80 oBtn06.onclick = function(){
81 oBody.style.backgroundColor = '#ee87b4';
82 }
83
84
85 }
86
87 </script>
88</head>
89<body id="body01">
90 <div class="set_bg_con">
91 <div class="set_text">请选择网页的背景色：</div>
92 <div class="style01" id="c01"></div>
93 <div class="style02" id="c02"></div>
94 <div class="style03" id="c03"></div>
95 <div class="style04" id="c04"></div>
96 <div class="style05" id="c05"></div>
97 <div class="style06" id="c06"></div>
98 </div>
99</body>
100</html>
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style type="text/css">
9 .set_con{
10 width:900px;
11 height:350px;
12 border:1px solid #666;
13 margin:50px auto 0;
14 }
15
16 .left_set{
17 width:299px;
18 float:left;
19 height:330px;
20 border-right:1px solid #666;
21 padding-top:20px;
22 }
23
24 .left_set label{
25 float:left;
26 width:80px;
27 height:40px;
28 line-height:40px;
29 text-align:left;
30 text-indent:20px;
31 margin-top:10px;
32 font-size:12px;
33 }
34
35 .left_set input{
36 padding:0px;
37 width:198px;
38 height:38px;
39 border: 1px solid #999;
40 float:left;
41 margin-top:10px;
42 text-indent:10px;
43 outline:none;
44 }
45
46 .left_set .setbtn{
47 width:99px;
48 height:40px;
49 border:0px;
50 background:#0181cc;
51 color:#fff;
52 text-indent:0px;
53 margin-left:80px;
54 font-size:16px;
55 margin-top:20px
56 }
57
58 .right_show{
59 width:600px;
60 height:350px;
61 float:left;
62 overflow:auto;
63 }
64
65 .box{
66 width:100px;
67 height:100px;
68 border: 5px solid #000;
69 background:gold;
70 margin:50px auto 0;
71 }
72
73 </style>
74 <script type="text/javascript">
75 window.onload = function(){
76 var oInput01 = document.getElementById('input01');
77 var oInput02 = document.getElementById('input02');
78 var oInput03 = document.getElementById('input03');
79 var oInput04 = document.getElementById('input04');
80 var oInput05 = document.getElementById('input05');
81 var oBtn = document.getElementById('input06');
82 var oBox = document.getElementById('box');
83
84 oBtn.onclick = function(){
85 var sVal01 = oInput01.value;
86 var sVal02 = oInput02.value;
87 var sVal03 = oInput03.value;
88 var sVal04 = oInput04.value;
89 var sVal05 = oInput05.value;
90
91 oBox.style.width = sVal01;
92 oBox.style.height = sVal02;
93 oBox.style.backgroundColor = sVal03;
94 oBox.style.border = sVal04;
95 oBox.style.borderRadius = sVal05;
96 }
97
98 }
99
100 </script>
101</head>
102<body>
103 <div class="set_con">
104 <div class="left_set">
105 <label>宽度：</label>
106 <input type="text" value="100px" id="input01">
107 <label>高度：</label>
108 <input type="text" value="100px" id="input02">
109 <label>背景色：</label>
110 <input type="text" value="gold" id="input03">
111 <label>边框：</label>
112 <input type="text" value="5px solid #000" id="input04">
113 <label>圆角：</label>
114 <input type="text" value="0px" id="input05">
115 <input type="button" value="设 置" class="setbtn" id="input06">
116 </div>
117 <div class="right_show">
118 <div class="box" id="box"></div>
119 </div>
120 </div>
121</body>
122</html>
