核心提示：html仿百度搜索页面效果代码!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN https://www.w3.org/TR/xht...
html仿百度搜索页面效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
margin:0 auto;
}
body{
background:url(../images/bg.jpg) no-repeat;
background-size:cover;
}
.p1{
width:auto;
height:200px;
text-align:center;
}
.p2{
width:auto;
height:40px;
text-align:center;
line-height:80px;
}
.p2 span{
position:relative;
}
.p2 input{
height:30px;
border: 1px solid #999;
}
.p2 input:hover{
transform:scale(1.5,1.5);
}
.p2 img{
position:absolute;
right:10px;
width:24px;
top:50%;
margin-top:-12px;;
}
.p2 img:hover{
transform:scale(1.4,1.4);
}
.btn{
width:120px;
height:35px;
background:#06F;
border:none;
color:#F00;
}
.p2 button:hover{
color: #F00;
transform:scale(2,2)
}
.p3{
width:auto;
height:600px;
text-align:center;
margin-top:200px;
}
.lie{
width:720px;
height:140px;
list-style:none;
}
.lie:hover{
transform:rotate(360deg);
transition:2s;
}
.lie li img{
width:128px;
height:128px;
float:left;
margin:5px;
}
.lie .img1:hover{
transform:rotate(360deg);
transition:3s;
}
.lie .img2:hover{
transform:rotate(-360deg);
transition:3s;
}
.lie .img3:hover{
transform:scale(1.5);
transition:2s;
}
.lie .img4:hover{
transform:skew(0deg,50deg)
}
</style>
</head>
<body>
<p class="p1">
<img src="../images/logo.png" />
</p>
<p class="p2">
<span><input type="text" size="70"/> <img src="../images/相机.png"/></span>
<button class="btn" >百度一下</button>
</p>
<p class="p3">
<ul class="lie">
<li><img class="img1" src="../images/weijuchiluntu.jpg" /></li>
<li><img src="../images/yuanjihuasy.png" /></li>
<li><img src="../images/sunlinanian.png" /></li>
<li><img src="../images/gaoqingdonmanxiaotuzis.jpg" /></li>
<li><img src="../images/duoroubanqq.jpg"</li>
</ul>
<ul class="lie">
<li><img class="img2" src="../images/touxixiaoqinx.jpg"</li>
<li><img src="../images/xiaoqingxbanq.jpg"</li>
<li><img class="img3" src="../images/fengjingxiaotu.jpg"</li>
<li><img class="img4"src="../images/bizhi112.png"</li>
<li><img src="../images/banquantupian801.png"</li>
</ul>
</p>
</body>
</html>
