源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下</title>
<style>
body {
margin: 0px;
padding: 0px;
}
#top {
height: 25px;
margin: 0 auto;
padding-left: 885px;
padding-top: 25px;
font-size: 13px;
}
#top>a{
color: #000000;
margin-right: 20px;
}
#top>a:hover{
color: blue;
}
#kw{
height: 28px;
width: 530px;
}
#su{
background: #3385ff;
height: 36px;
width: 100px;
color: #ffffff;
font-size: 15px;
letter-spacing: 1px;
border-bottom: 1px solid #2d78f4;
outline: medium;
-webkit-appearance: none;
-webkit-border-radius: 0;
}
#su:hover{
background: #317ef3;
border-bottom: 1px solid #2868c8;
box-shadow: 1px 1px 1px #ccc;
}
#xia{
font-size: 12px;
}
#xia>p>a {
margin: 10px;
color: #999;
}
#p2{
margin: 10px;
color: #999;
}
</style>
</head>
<body>
<div>
<div id="top">
<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>
<a href="" style="background: deepskyblue">更多产品</a>
</div>
<div style="text-align: center;padding-top: 20px">
<a href=""><img width="270" height="129" src="./bd_logo1.png"></a>
</div>
<div style="text-align: center;padding-top: 20px">
<a href=""><input id="kw" maxlength="255" value="" autocomplete="off">
<img src="./1622618865.jpg" alt="">
<input id="su" type="submit" value="百度一下"></a>
</div>
<div style="text-align: center">
<div style="padding-top: 110px">
<img src="./zbios_09b6296.png" alt="图片走丢了">
</div>
<div>
<p style="color: #333;font-size: 16px;letter-spacing: 3px">下载百度App</p>
<p style="color: #999;font-size: 14px;font-weight: 300">有事搜一搜,没事看一看</p>
</div>
</div>
<div id="xia" style="text-align: center">
<p style="list-style: none;"><a href="">把百度设为主页</a>
<a href="">关于百度</a>
<a href="">About Baidu</a>
<a href="">百度推广</a></p>
<p id="p2">
©2019 Baidu <a href="">使用百度前必读</a>
<a href="">意见反馈</a>京ICP证030173号♆
<a href="">京公网安备11000002000001号</a><img width="14px" height="17px" src="./icons_441e82f.png" alt="">
</p>
</div>
</div>
</body>
</html>
显示效果: