<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.beijing{
background-image: url(img/img2.jpg);
width: 100%;
width: 1421px;
height: 761px;
}
.da{
width: 627px;
height: 42px;
position: absolute;
top: 181px;
left: 405px;
}
.da:hover{
width: 100%;
width: auto;
height: 60px;
}
.da2{
width: 29px;
height: 42px;
background-color: #fafafc;
float: right;
}
.da2:hover{
width: 35px;
height: 50px;
background-color: #fafafc;
float: right;
}
.da3{
width: 105px;
height: 42px;
background-color: #fafafc;
float: right;
}
.da3:hover{
width: 210px;
height: 84px;
background-color: #fafafc;
float: right;
}
.bai{
width: 105px;
height: 42px;
color: white;
background-color: #fafafc;
float: right;
}
.bai:hover{
width: 210px;
height: 84px;
color: red;
background-color: #fafafc;
float: right;
}
.cc{
width: 100%;
width: 491px;
height: 42px;
}
.cc:hover{
width: 100%;
width: 736px;
height: 60px;
}
/*上方是搜索的事件代码下方是图片的*/
.t1{
width: 150px;
height: 135px;
background-image: url(img/z12.jpg);
position: absolute;
left:398px;
top:395px;
margin-left:-75px;
margin-top:-67px;
}
.t1:hover{
width: 150px;
height: 135px;
background-image: url(img/z12.jpg);
position: absolute;
left:398px;
top:395px;
margin-left:-75px;
margin-top:-67px;
animation: xuanzhuan 6s linear infinite;
}
.t2{
width: 150px;
height: 135px;
background-image: url(img/z17.jpg);
position: absolute;
left:398px;
top:540px;
margin-left:-75px;
margin-top:-67px;
}
.t2:hover{
width: 150px;
height: 135px;
background-image: url(img/z17.jpg);
position: absolute;
left:398px;
top:540px;
margin-left:-75px;
margin-top:-67px;
animation: fanzhuan 6s linear infinite;
}
.t3{
width: 150px;
height: 135px;
position: absolute;
left:718px;
top:540px;
margin-left:-75px;
margin-top:-67px;
}
.t3:hover{
position: absolute;
left:718px;
top:540px;
margin-left:-75px;
margin-top:-67px;
animation: fangda 3s linear 1;
}
.t4{
width: 150px;
height: 135px;
position: absolute;
left:877px;
top:540px;
margin-left:-75px;
margin-top:-67px;
}
.t4:hover{
position: absolute;
left:877px;
top:540px;
margin-left:-75px;
margin-top:-67px;
animation: weiyi 3s linear 1;
}
@keyframes xuanzhuan{
0%{}
100%{
transform:rotate(360deg);
}
}
@keyframes fanzhuan{
0%{}
100%{
transform:rotate(-360deg);
}
}
@keyframes fangda{
0%{}
100%{
transform:scale(1.5);
}
}
@keyframes weiyi{
0%{}
100%{
transform:skewX(-50deg)
}
}
.t5{
width: 150px;
height: 135px;
position: absolute;
left:556px;
top:395px;
margin-left:-75px;
margin-top:-67px;
}
.t6{
width: 150px;
height: 135px;
position: absolute;
left:718px;
top:395px;
margin-left:-75px;
margin-top:-67px;
}
.t7{
width: 150px;
height: 135px;
position: absolute;
left:877px;
top:395px;
margin-left:-75px;
margin-top:-67px;
}
.t8{
width: 150px;
height: 135px;
position: absolute;
left:1037px;
top:395px;
margin-left:-75px;
margin-top:-67px;
}
.t9{
width: 150px;
height: 135px;
position: absolute;
left:557px;
top:542px;
margin-left:-75px;
margin-top:-67px;
}
.t10{
width: 150px;
height: 135px;
position: absolute;
left:1037px;
top:542px;
margin-left:-75px;
margin-top:-67px;
}
</style>
</head>
<body>
<div class="beijing">
<div class="da">
<input type="text" class="cc" style="background-color: #fafafc; border: 0px;"/>
<div class="da3"><input class="bai" type="button" value="百度一下" style=" background-color: #2d8df3; font-size: 17px;border: 0px;"/></div>
<div class="da2"><img src="img/z11.jpg" style="width: 29px; height: 42px;"/></div>
</div>
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"><img src="img/z19.jpg"/></div>
<div class="t4"><img src="img/z110.jpg"/></div>
<div class="t5"><img src="img/z13.jpg"/></div>
<div class="t6"><img src="img/z14.jpg"/></div>
<div class="t7"><img src="img/z15.jpg"/></div>
<div class="t8"><img src="img/z16.jpg"/></div>
<div class="t9"><img src="img/z18.jpg"/></div>
<div class="t10"><img src="img/z111.jpg"/></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.beijing{
background-image: url(img/img2.jpg);
width: 100%;
width: 1421px;
height: 761px;
}
.da{
width: 627px;
height: 42px;
position: absolute;
top: 181px;
left: 405px;
}
.da:hover{
width: 100%;
width: auto;
height: 60px;
}
.da2{
width: 29px;
height: 42px;
background-color: #fafafc;
float: right;
}
.da2:hover{
width: 35px;
height: 50px;
background-color: #fafafc;
float: right;
}
.da3{
width: 105px;
height: 42px;
background-color: #fafafc;
float: right;
}
.da3:hover{
width: 210px;
height: 84px;
background-color: #fafafc;
float: right;
}
.bai{
width: 105px;
height: 42px;
color: white;
background-color: #fafafc;
float: right;
}
.bai:hover{
width: 210px;
height: 84px;
color: red;
background-color: #fafafc;
float: right;
}
.cc{
width: 100%;
width: 491px;
height: 42px;
}
.cc:hover{
width: 100%;
width: 736px;
height: 60px;
}
/*上方是搜索的事件代码下方是图片的*/
.t1{
width: 150px;
height: 135px;
background-image: url(img/z12.jpg);
position: absolute;
left:398px;
top:395px;
margin-left:-75px;
margin-top:-67px;
}
.t1:hover{
width: 150px;
height: 135px;
background-image: url(img/z12.jpg);
position: absolute;
left:398px;
top:395px;
margin-left:-75px;
margin-top:-67px;
animation: xuanzhuan 6s linear infinite;
}
.t2{
width: 150px;
height: 135px;
background-image: url(img/z17.jpg);
position: absolute;
left:398px;
top:540px;
margin-left:-75px;
margin-top:-67px;
}
.t2:hover{
width: 150px;
height: 135px;
background-image: url(img/z17.jpg);
position: absolute;
left:398px;
top:540px;
margin-left:-75px;
margin-top:-67px;
animation: fanzhuan 6s linear infinite;
}
.t3{
width: 150px;
height: 135px;
position: absolute;
left:718px;
top:540px;
margin-left:-75px;
margin-top:-67px;
}
.t3:hover{
position: absolute;
left:718px;
top:540px;
margin-left:-75px;
margin-top:-67px;
animation: fangda 3s linear 1;
}
.t4{
width: 150px;
height: 135px;
position: absolute;
left:877px;
top:540px;
margin-left:-75px;
margin-top:-67px;
}
.t4:hover{
position: absolute;
left:877px;
top:540px;
margin-left:-75px;
margin-top:-67px;
animation: weiyi 3s linear 1;
}
@keyframes xuanzhuan{
0%{}
100%{
transform:rotate(360deg);
}
}
@keyframes fanzhuan{
0%{}
100%{
transform:rotate(-360deg);
}
}
@keyframes fangda{
0%{}
100%{
transform:scale(1.5);
}
}
@keyframes weiyi{
0%{}
100%{
transform:skewX(-50deg)
}
}
.t5{
width: 150px;
height: 135px;
position: absolute;
left:556px;
top:395px;
margin-left:-75px;
margin-top:-67px;
}
.t6{
width: 150px;
height: 135px;
position: absolute;
left:718px;
top:395px;
margin-left:-75px;
margin-top:-67px;
}
.t7{
width: 150px;
height: 135px;
position: absolute;
left:877px;
top:395px;
margin-left:-75px;
margin-top:-67px;
}
.t8{
width: 150px;
height: 135px;
position: absolute;
left:1037px;
top:395px;
margin-left:-75px;
margin-top:-67px;
}
.t9{
width: 150px;
height: 135px;
position: absolute;
left:557px;
top:542px;
margin-left:-75px;
margin-top:-67px;
}
.t10{
width: 150px;
height: 135px;
position: absolute;
left:1037px;
top:542px;
margin-left:-75px;
margin-top:-67px;
}
</style>
</head>
<body>
<div class="beijing">
<div class="da">
<input type="text" class="cc" style="background-color: #fafafc; border: 0px;"/>
<div class="da3"><input class="bai" type="button" value="百度一下" style=" background-color: #2d8df3; font-size: 17px;border: 0px;"/></div>
<div class="da2"><img src="img/z11.jpg" style="width: 29px; height: 42px;"/></div>
</div>
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"><img src="img/z19.jpg"/></div>
<div class="t4"><img src="img/z110.jpg"/></div>
<div class="t5"><img src="img/z13.jpg"/></div>
<div class="t6"><img src="img/z14.jpg"/></div>
<div class="t7"><img src="img/z15.jpg"/></div>
<div class="t8"><img src="img/z16.jpg"/></div>
<div class="t9"><img src="img/z18.jpg"/></div>
<div class="t10"><img src="img/z111.jpg"/></div>
</body>
</html>