设置和更多的效果还不会写emm..二维码和相机图标也没，所以只是个半成品 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
font-family: Microsoft YaHei;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
text-decoration: none;
}
.leftLink {
float: left;
margin-top: 15px;
color: #222222;
font-size: 13px;
padding: 0 16px;
}
.leftLink:hover,
.setting:hover {
color: #315EFB;
}
.banner {
width: 100%;
height: 60px;
}
.right,
.right li {
float: right;
padding: 0 18px;
margin-top: 6px;
font-size: 13px;
}
.right {
margin-right: 0px;
}
.setting {
line-height: 24px;
}
.login {
display: block;
border-radius: 5px;
height: 20px;
width: 36px;
line-height: 18px;
padding: 2px 0 1px 10px;
color: white;
background-color: #4E71F2;
}
.logo {
display: block;
width: 270px;
margin: 70px auto 0 auto;
}
.searchBox {
width: 700px;
margin: 20px auto 0 auto;
}
.search {
display: block;
float: left;
height: 35px;
width: 560px;
outline: 0 none;
border-radius: 8px 0px 0px 8px;
/* border-color: #4E71F2; */
border: #C4C7CE 2px solid;
border-right: none;
}
.search:hover {
border-color: #A7AAB5;
}
.search:focus {
border-color: #4E71F2;
}
.btn {
display: block;
float: left;
height: 41px;
width: 100px;
border: none;
background-color: #4E71F2;
outline: 0 none;
color: white;
font-size: 17px;
border-radius: 0px 8px 8px 0;
}
.btn:hover {
background-color: #4662D9
}
.footer {
width: 100%;
height: 40px;
left: 0;
margin: 0;
position: absolute;
line-height: 38px;
background-color: #FBFBFB;
bottom: 0;
}
.lefFooter {
float: left;
}
.rightFooter {
float: right;
margin-right: 20px;
}
.leftFooter li a,
.rightFooter li a {
padding-left: 20px;
font-size: 12px;
color: #9195A3;
}
.leftFooter li a:hover,
.rightFooter li a:hover {
color: black;
}
.imgSearch {
display: inline-block;
width: 26px;
height: 22px;
background-image: url(./images/camera_gray.png);
}
</style>
</head>
<body>
<!-- 顶端banner部分 -->
<div class="banner">
<ul>
<li><a class="leftLink" href="https://news.baidu.com/">新闻</a></li>
<li><a class="leftLink" href="https://www.hao123.com/">hao123</a></li>
<li><a class="leftLink" href="https://map.baidu.com/">地图</a></li>
<li><a class="leftLink" href="https://haokan.baidu.com/">视频</a></li>
<li><a class="leftLink" href="https://tieba.baidu.com/">贴吧</a></li>
<li><a class="leftLink" href="https://xueshu.baidu.com/">学术</a></li>
<li><a class="leftLink" href="https://www.baidu.com/more/">更多</a></li>
</ul>
<ul class="right">
<li><a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5" class="login">登录</a></li>
<li><a href="#" class="setting">设置</a></li>
</ul>
</div>
<!-- 主体部分 -->
<img class="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<div class="searchBox">
<form action="https://www.baidu.com/s" method="get">
<input class="search" type="text" name="wd" />
<input class="btn" type="submit" value="百度一下" />
</form>
</div>
<!-- 页脚部分 -->
<div class="footer">
<ul class="leftFooter">
<li><a href="https://www.baidu.com/cache/setindex/index.html">设为首页</a></li>
<li><a href="https://home.baidu.com/">关于百度</a></li>
<li><a href="http://ir.baidu.com/">About Baidu</a></li>
<li><a href="https://isite.baidu.com/site/e.baidu.com/d38e8023-2131-4904-adf7-a8d1108f51ef?refer=888">百度营销</a></li>
<li><a href="https://www.baidu.com/duty">使用百度前必读</a></li>
<li><a href="https://help.baidu.com/newadd?prod_id=1&category=4">意见反馈</a></li>
<li><a href="https://help.baidu.com/">帮助中心</a></li>
<li><a href="https://iwenjuan.baidu.com/?code=61rwh8">有奖问卷</a></li>
</ul>
<ul class="rightFooter">
<li><a href="#">©2020 Baidu</a></li>
<li><a href="#">(京)-经营性-2017-0020</a></li>
<li><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a></li>
<li><a href="#">京ICP证030173号</a></li>
</ul>
</div>
</body>
</html>
发表回复
仿写可还行（到时候参考下
）