仿百度页面（html+css）
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
width: 100%;
}
*{
padding: 0;
margin: 0;
}
.all .first a{
font-family: "微软雅黑";
font-size: smaller ;
color: black;
font-weight:bold ;
}
.all .first a:hover{
color: blue;
}
.all{
width: 1600px;
}
.all .first{
position: absolute;
top: 20px;
right:14px;
}
.all .second{
height:350px;
padding-left: 650px;
padding-top: 80px;
}
.all .third{
width:1595px;
height:280px;
position: relative;
}
.all .first .product{
background:cornflowerblue;
display: inline-block;
height: 20px;
width: 58px;
}
.all .first .product a{
color: white;
text-decoration: none;
}
.all .second .shuru{
width: 539px;
height: 34px;
border: 1px solid dodgerblue;
position: absolute;
left: 477px;
top: 240px;
}
.all .second .ok{
width: 100px;
height: 36px;
color: white;
background: #317ef3;
border: 0;
font-size:medium;
position: absolute;
top:240px;
left: 1018px;
}
.all .third .er{
position: absolute;
top: 100px;
left: 755px;
}
.all .third .mobile{
color: gray;
font-size: small;
font-weight: bold;
font-family: "微软雅黑";
width: 55px;
height: 20px;
position: absolute;
top:160px;
left: 755px;
}
.all .third .h{
position: absolute;
top:200px;
left:600px;
width: 550px;
height: 20px;
}
.all .third .r{
position: absolute;
top:220px;
left:530px;
width: 580px;
height: 20px;
}
.all .third a{
font-family: "微软雅黑";
font-size: smaller;
color: gray;
}
</style>
</head>
<body>
<div class="all">
<div class="first">
<a href="">新闻</a>
<a href="">hao123</a>
<a href="">地图</a>
<a href="">视频</a>
<a href="">贴吧</a>
<a href="">学术</a>
<a href="">登录</a>
<a href="">设置</a>
<span class="product"><a href="">更多产品</a></span>
</div>
<div class="second">
<img src="img/baidu.png" height="129" width="270"/>
<input type="text" class="shuru"/>
<input type="submit" class="ok" value="百度一下"/>
</div>
<div class="third">
<img src="img/erweima.jpg" height="60" width="60" class="er"/><br/>
<span class="mobile">手机百度</span><br/>
<div class="h">
<a href="">把百度设为主页</a>
<a href="">关于百度</a>
<a href="">About Baidu</a>
<a href="">百度推广</a><br/>
</div>
<div class="r">
<a href="">©2017 Baidu 使用百度前必读 意见反馈 京ICP证030173号</a>
<a href=""> 京公网安备11000002000001号</a>
</div>
</div>
</div>
</body>
</html>
效果图如下：