<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预热作业</title>
<style>
body,p,input{
padding:0;margin:0;
}
a{
text-decoration:none;
}
body{
padding:20px;
background:#f1f1f1;
}
#oDiv{
width:100px;
height:100px;
background:#fff;
border:2px solid black;
}
p input{
width:60px;
height:30px;
background-color:red;
}
#seting{
width:260px;
height:140px;
background-color:#999;
padding:20px;
position:absolute;
left:700px;
top:200px;
display:none;
}
#box{
width:208px;
height:124px;
background-color:#fff;
padding:8px 26px;
}
#seting #box p{
font:14px/30px "宋体";
color:#000;
}
#seting #box p span{
padding:2px;
}
#box input{
width:60px;
height:30px;
background-color:blue;
color:#fff;
}
input[type = "reset"]{
margin-left:40px;
}
a{
padding:2px;
background-color:#e7e7e7;
color:#000;
}
a:hover{
background-color:#e54346;
color:#000;
}
</style>
<script>
window.onload = function(){
var oButton = document.getElementById("button");
var oSeting = document.getElementById("seting");
var oBody = document.getElementById("body");
var oSetWithLittle = document.getElementById("set_width_little");
var oSetWithMiddle= document.getElementById("set_width_middle");
var oSetWithBig= document.getElementById("set_width_big");
var oSetHeightLittle = document.getElementById("set_height_little");
var oSetHeightMiddle= document.getElementById("set_height_middle");
var oSetHeightBig= document.getElementById("set_height_big");
var oSetRed = document.getElementById("set_red");
var oSetBlue= document.getElementById("set_blue");
var oSetYellow= document.getElementById("set_yellow");
var oDiv = document.getElementById("oDiv");
var oReset = document.getElementById("reset");
var oSubmite = document.getElementById("submit");
oButton.onclick = function(){
oSeting.style.display = "block";
oBody.style.background = "#808080";
}
oSetWithLittle.onclick = function(){
oDiv.style.width = "200px";
}
oSetWithMiddle.onclick = function(){
oDiv.style.width = "300px";
}
oSetWithBig.onclick = function(){
oDiv.style.width = "400px";
}
oSetHeightLittle.onclick = function(){
oDiv.style.height = "200px";
}
oSetHeightMiddle.onclick = function(){
oDiv.style.height = "300px";
}
oSetHeightBig.onclick = function(){
oDiv.style.height = "400px";
}
oSetRed.onclick = function(){
oDiv.style.background = "red";
}
oSetBlue.onclick = function(){
oDiv.style.background = "blue";
}
oSetYellow.onclick = function(){
oDiv.style.background = "yellow";
}
oReset.onclick = function(){
oDiv.style.width = "100px";
oDiv.style.height = "100px";
oDiv.style.background = "#fff";
}
oSubmite.onclick = function(){
oSeting.style.display = "none";
oBody.style.background = "#f1f1f1";
}
}
</script>
</head>
<body id = "body">
<p>请为下面的DIV设置样式:<input type = "button" value = "点击设置"/ id = "button"></p>
<div id = "oDiv"></div>
<div id = "seting">
<div id = "box">
<p>请选择背景色:
<span id = "set_red" style = "background-color:#9cce00">红</span>
<span id = "set_yellow" style = "background-color:#efbd00">黄</span>
<span id = "set_blue" style = "background-color:#5a94ef">蓝</span>
</p>
<p>请选择宽(px):
<a href = "#"><span id = "set_width_little">200</span></a>
<a href = "#"><span id= "set_width_middle">300</span></a>
<a href = "#"><span id= "set_width_big">400</span></a>
</p>
<p>请选择高(px):
<a href = "#"><span id = "set_height_little">200</span></a>
<a href = "#"><span id= "set_height_middle">300</span></a>
<a href = "#"><span id= "set_height_big">400</span></a>
</p>
<input type = "reset" value = "恢复"/ id = "reset"><input type = "submit" value = "确定"/ id = "submit">
</div>
</div>
</body>
</html>
第0课--预热作业
最新推荐文章于 2024-05-22 12:15:29 发布