<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0px; padding: 0px}
body{width: 1024px; height: 100%; margin: 0 auto}
#title{width: 220px; height: 80px; margin: 0 auto; padding: 100px 0px 50px 0px}
#nav{width: 420px; height: 35px; margin: 0 auto; background-color: white}
#nav input{width: 300px; height: 35px; border: 0px; position: absolute; left: 36%;}
#nav input:hover{transform: scale(1.5)}
#nav img{vertical-align: middle; position: absolute; left: 57%; top: 31%;}
#nav img:hover{transform: scale(1.2)}
#baidu{padding: 6.5px 10.5px; color: white; background-color: dodgerblue; position: absolute; left: 59%}
#baidu:hover{transform: scale(2); color: red}
#main{margin: 0 auto; width: 770px; position: absolute; left: 25%; top: 40%}
.float{float: left}
.img1{ transition:All 1s ease-in-out;}
.img1:hover{transform: rotate(360deg)}
.img2{ transition:All 1s ease-in-out;}
.img2:hover{transform: rotate(-360deg)}
.img3{ transition:All 1s ease-in-out;}
.img3:hover{transform: scale(1.5)}
.img4{ transition:All 1s ease-in-out;}
.img4:hover{transform: skew(-50deg)}
</style>
</head>
<body background="20120921215232_Ay5mx.jpeg">
<div id="title"><img src="title.jpg" /></div>
<div id="nav">
<div class="float">
<input type="text">
<img src="xiangji.jpg">
</div>
<div class="float" id="baidu" >百度一下</div>
</div>
<div id="main">
<div>
<img src="img1-1.jpg" class="img1" />
<img src="img1-2.jpg" />
<img src="img1-3.jpg" />
<img src="img1-4.jpg" />
<img src="img1-5.jpg" />
</div>
<div>
<img src="img2-1.jpg" class="img2" />
<img src="img2-2.jpg" />
<img src="img2-3.jpg" class="img3" />
<img src="img2-4.jpg" class="img4" />
<img src="img2-5.jpg" />
</div>
</div>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0px; padding: 0px}
body{width: 1024px; height: 100%; margin: 0 auto}
#title{width: 220px; height: 80px; margin: 0 auto; padding: 100px 0px 50px 0px}
#nav{width: 420px; height: 35px; margin: 0 auto; background-color: white}
#nav input{width: 300px; height: 35px; border: 0px; position: absolute; left: 36%;}
#nav input:hover{transform: scale(1.5)}
#nav img{vertical-align: middle; position: absolute; left: 57%; top: 31%;}
#nav img:hover{transform: scale(1.2)}
#baidu{padding: 6.5px 10.5px; color: white; background-color: dodgerblue; position: absolute; left: 59%}
#baidu:hover{transform: scale(2); color: red}
#main{margin: 0 auto; width: 770px; position: absolute; left: 25%; top: 40%}
.float{float: left}
.img1{ transition:All 1s ease-in-out;}
.img1:hover{transform: rotate(360deg)}
.img2{ transition:All 1s ease-in-out;}
.img2:hover{transform: rotate(-360deg)}
.img3{ transition:All 1s ease-in-out;}
.img3:hover{transform: scale(1.5)}
.img4{ transition:All 1s ease-in-out;}
.img4:hover{transform: skew(-50deg)}
</style>
</head>
<body background="20120921215232_Ay5mx.jpeg">
<div id="title"><img src="title.jpg" /></div>
<div id="nav">
<div class="float">
<input type="text">
<img src="xiangji.jpg">
</div>
<div class="float" id="baidu" >百度一下</div>
</div>
<div id="main">
<div>
<img src="img1-1.jpg" class="img1" />
<img src="img1-2.jpg" />
<img src="img1-3.jpg" />
<img src="img1-4.jpg" />
<img src="img1-5.jpg" />
</div>
<div>
<img src="img2-1.jpg" class="img2" />
<img src="img2-2.jpg" />
<img src="img2-3.jpg" class="img3" />
<img src="img2-4.jpg" class="img4" />
<img src="img2-5.jpg" />
</div>
</div>
</body>
</html>
2272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
