1.制作QQ彩贝高级搜索页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ彩贝高级搜索</title>
<style>
#wong{
width: 200px;
border: 1px solid;
margin: 0px auto;
text-align: center;
}
h2{
margin-left: -70px;
}
.dii{
padding: 6px;
}
.dow{
width: 80px;
height: 30px;
background: rgba(3, 3, 9, 0.14);
margin-top: 10px;
}
#wong2{
width: 200px;
text-align: center;
margin-top: 10px;
display: none;
animation: niubi 3s linear;
}
select{
margin: 8px;
}
#wong:hover #wong2{
display: block;
}
@keyframes niubi {
0%{
opacity: 0;
height: 20px;
}
25%{
height: 40px;
opacity: 0.1;
}
50%{
height: 60px;
opacity: 0.2;
}
75%{
height: 80px;
opacity: 0.3;
}
100%{
height: 100px;
opacity: 0.4;
}
}
</style>
</head>
<body>
<div id="wong">
<h2>高级搜索</h2>
<hr style="width: 160px;height: 3px;background: red"/>
<form method="post" action="#">
<input type="text" value="请输入关键字" class="dii"/>
<input type="submit" class="dow" value="搜索"/>
</form>
<div id="wong2">
<select><option>场合</option></select>
<select><option>性别</option></select>
<select><option>风格</option></select>
<select><option>色系</option></select>
<select><option>价格</option></select>
<select><option>年龄</option></select>
<select><option>季节</option></select>
</div>
</div>
</body>
</html>2，制作百度糯米购物导航页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1500px;
border: 1px solid;
}
img:nth-of-type(1){
width: 1500px;
}
img:nth-of-type(2){
position: fixed;
right: 0px;
top: 400px;
background: #a5002b;
}
img:nth-of-type(3){
position: fixed;
right: 0px;
top: 420px;
background: #a5002b;
}
img:nth-of-type(4){
position: fixed;
right: 0px;
top: 440px;
background: #a5002b;
}
img:nth-of-type(5){
position: fixed;
right: 0px;
top: 460px;
background: #a5002b;
}
</style>
</head>
<body>
<div>
<img src="imgs3/img.bmp"/>
<img src="imgs3/toolbar_05.png"/>
<img src="imgs3/toolbar_10.png"/>
<img src="imgs3/toolbar_15.png"/>
<img src="imgs3/toolbar_19.png"/>
</div>
</body>
</html>3，制作城市街景动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市街景动画</title>
<style>
body{
background: gray;
z-index: 99;
}
.div{
width: 1181px;
height: 780px;
margin: auto;
background: #212636;
animation: name 15s ease-in-out infinite alternate;
}
@keyframes name {
0%{
background: #212636;
}
20%{
background: #A68575;
}
40%{
background: #F7CCB5;
}
60%{
background: #DCECEC;
}
80%{
background: #B4C0CE;
}
100%{background: #6D5E80;
}
}
.d1{
position: absolute;
top: 500px;
z-index: 10;
}
.d2{
position: absolute;
top: 500px;
left: 350px;
z-index: 13;
}
.d3{
position: absolute;
top: 500px;
right: -400px;
z-index: 13;
}
.d4{
position: absolute;
top: 500px;
left: -400px;
z-index: 13;
}
.d5{
position: absolute;
top: 490px;
left: 100px;
z-index: 12;
}
.d6{
position: absolute;
top: 490px;
right: -300px;
z-index: 12;
}
.d7{
position: absolute;
top: 420px;
left: 750px;
z-index: 1;
}
.d8{
position: absolute;
top: 430px;
left: 160px;
z-index: 11;
}
.d9{
position: absolute;
top: 330px;
left: 360px;
z-index: 12;
}
.d10{
position: absolute;
top: 360px;
left: 610px;
z-index: 10;
}
.d11{
position: absolute;
top: 480px;
left: 160px;
z-index: 9;
}
.d12{
position: absolute;
top: 480px;
left: 380px;
z-index: 9;
}
.d13{
position: absolute;
top: 480px;
right: 0px;
z-index: 9;
}
.d14{
position: absolute;
top: 400px;
left: 800px;
z-index: 11;
}
.d15{
position: absolute;
top: 100px;
left: 160px;
z-index: 11;
}
.d16{
position: absolute;
top: 100px;
left: 460px;
z-index: 11;
}
.d17{
position: absolute;
top: 100px;
left: 860px;
z-index: 11;
}
.d18{
position: absolute;
top: 150px;
right: 130px;
z-index: 11;
transform: rotate(10deg);
animation: name1 15s ease-in-out infinite alternate;
}
@keyframes name1 {
0%{
transform: translate(0px) rotate(10deg);
}
20%{
transform: translate(-240px) rotate(10deg);
}
40%{
transform: translate(-480px) rotate(40deg);
}
60%{
transform: translate(-720px) rotate(70deg);
}
80%{
transform: translate(-960px) rotate(50deg);
}
100%{
transform: translate(-1181px) rotate(10deg);
}
}
</style>
</head>
<body>
<div class="div">
<div class="d1"><img src="image/groundBack.png"/></div>
<div class="d2"><img src="image/groundFront.png"/></div>
<div class="d3"><img src="image/groundFront.png"/></div>
<div class="d4"><img src="image/groundFront.png"/></div>
<div class="d5"><img src="image/groundMid.png"/></div>
<div class="d6"><img src="image/groundMid.png"/></div>
<div class="d7"><img src="image/beans.png"/></div>
<div class="d8"><img src="image/dowEventCenter.png"/></div>
<div class="d9"><img src="image/friendshipShell.png"/></div>
<div class="d10"><img src="image/Glockenspiel.png"/></div>
<div class="d11"><img src="image/skyline.png"/></div>
<div class="d12"><img src="image/skyline.png"/></div>
<div class="d13"><img src="image/skyline.png"/></div>
<div class="d14"><img src="image/Planetarium.png"/></div>
<div class="d15"><img src="image/cloudSmall.png"/></div>
<div class="d16"><img src="image/cloudMedium.png"/></div>
<div class="d17"><img src="image/cloudLarge.png"/></div>
<div class="d18"><img src="image/balloon.png"/></div>
</div>
</body>
</html>