console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>baidu</title>
<style type="text/css">
*{
vertical-align: top;
}
a{
color: black;
}
.topp{
float: right;
}
.sousuo{
display: flex;
font-family: "微软雅黑";
}
img{
margin-left: 450px;
}
.search_input{
height: 100%;
width: 450px;
padding-left: 10px;
font-size: 20px;
color: #000;
background-color: white;
background-position: 10px 13px;
margin-top: 25px;
}
.bto{
margin-top: 25px;
height: 30px;
width: 100px;
}
.bto1{
margin-top: 25px;
height: 30px;
width: 100px;
}
.bangzhu{
margin-top: 30px;
}
.menu{
width: 100%;
height: 60px;
background-color: #1E90FF;
}
li{
list-style-type: none;
}
.menu > li {
width: 100px;
display: inline-block;
margin-left: 30px;
cursor: pointer;
font-size: 20px;
height: 60px;
line-height: 60px;
overflow: hidden;
margin-left: 200px;
}
.menu > li:hover {
color: #fff;
overflow: visible;
}
.menu ul {
width: 120px;
padding-left: 20px;
float: left;
margin-top: 0;
font-size: 20px;
color: white;
background-color: #87CEEB;
}
.bankuai2{
width: 100%;
height: 300px;
background-color: gray;
}
.bofang{
margin-left: 800px;
}
.box{
margin: 0 auto;
width: 1100px;
font-size: 20px;
}
.box > p{
text-indent: 2em;
}
#zy{
display: flex;
}
.pic {
width: 350px;
margin-top: -250px;
margin-left: 200px;
}
</style>
</head>
<body>
<section>
<div class="topp">
<a href="https://www.baidu.com/">网页</a>
<a href="http://news.baidu.com/">新闻</a>
<a href="https://tieba.baidu.com/">贴吧</a>
<a href="https://zhidao.baidu.com/">知道</a>
<a href="http://music.taihe.com/">音乐</a>
<a href="http://image.baidu.com/">图片</a>
<a href="http://v.baidu.com/">视频</a>
<a href="https://map.baidu.com/">地图</a>
<a href="https://wenku.baidu.com/">文库</a>
<a href="https://baike.baidu.com/">百科</a>
<a>   </a>
<a href="https://www.baidu.com/">首页</a>
<a href="https://passport.baidu.com/v2/?reg®Type=1&tpl=wk">注册</a>
</div>
</section><br>
<hr>
<section>
<div class="sousuo">
<a href="https://www.baidu.com" target="_blank">
<img src="./source/baidu.jpg">
</a>
<input class="search_input" type="text" placeholder="请输入要搜索的关键词">
<button class="bto">进入词条</button>
<p> </p>
<button class="bto1">全站搜索</button>
<p>  </p>
<a href="https://baike.baidu.com/help" class="bangzhu">帮助</a>
</div>
</section>
<section>
<ul class="menu">
<li class="shouye">首页
<ul>
<li>
<a href="https://www.baidu.com" target="_blank">百度百科</a>
</li>
<li>
<a href="https://www.baidu.com" target="_blank">百度百科</a>
</li>
<li>
<a href="https://www.baidu.com" target="_blank">百度百科</a>
</li>
</ul>
</li>
<li>分类
<ul>
<li>百度百科</li>
<li>百度百科</li>
<li>百度百科</li>
</ul>
</li>
<li>百科
<ul>
<li>百度百科</li>
<li>百度百科</li>
<li>百度百科</li>
</ul>
</li>
<li>用户
<ul>
<li>百度百科</li>
<li>百度百科</li>
<li>百度百科</li>
</ul>
</li>
<li>合作
<ul>
<li>百度百科</li>
<li>百度百科</li>
<li>百度百科</li>
</ul>
</li>
</ul>
</section>
<section>
<div class="bankuai2">
</div>
</section>
<section>
<div class="box">
<h1>百度百科
<button>编辑</button>
</h1>
</div>
<div class="box">
<p>百度百科是百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2019年8月，百度百科已经收录了超1600万词条，参与词条编辑的网友超过680万人，几乎涵盖了所有已知的知识领域。</p>
<p>“世界很复杂，百度更懂你”，百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。</p>
</div>
</section>
<section>
<div class="box">
<h2>发展简史</h2>
<h3>UGC时期</h3>
<p>百度百科是百度2006年4月20日推出第三个基于搜索平台建立的社区类产品，这是继百度贴吧、百度知道后，百度再度深化知识搜索体系。</p>
<p>2007年1月10日，百科首页第一次改版。新增百科任务、百科之星、上周贡献榜等栏目。</p>
<p>2007年4月2日，百科蝌蚪团正式成立，4月10日，百科蝌蚪团第一批成员出现，4月26日蝌蚪团首页上线。</p>
<p>2007年4月19日，词条页面改版，改良词条页面的行高和行宽，在词条页面的底部增加了汉英词典解释，改进历史版本页面；5月百科编辑词条积分调整；6月开放分类检索升级，历史版本增加翻页功能，百科优质版本标准出台；9月高级编辑器上线，百科任务改版。11月百科推出相关词条，可以在百度知道里搜索到百科词条。（百度百科历史首页图片相册图片来源： [3] ）</p>
<P>2008年1月16日百度百科的第100万个词条诞生。</P>
<p>2008年4月21日，百度百科正式版上线，首页增加优质版本榜，优质词条栏目;8月28日，百科帮助页更新，增加词条编辑原则;9月18日，词条浏览页升级。</p>
</div>
</section>
</body>
</html>