<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.top {
height: 60px;
padding-left:20px;
}
.top a {
text-decoration: none;
font-size: 13px;
color: #222;
float: left;
margin-right: 24px;
margin-top: 19px;
}
.top .denglu {
float: right;
background-color:#4e6ef2;
margin-top: 15px;
color:white;
height: 24px;
width: 48px;
line-height: 24px;
text-align: center;
border-radius: 5px;
}
.top .shezhi{
float: right;
}
a:hover {
color: #4e6ef2;
}
.box {
width:100%;
margin: 0 auto;
text-align: center;
}
.hezi {
width: 660px;
height: 40px;
margin: 0 auto;
}
.text {
border: 1px #4e6ef2 solid;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
width: 544px;
height: 40px;
float: left;
}
#sousuo {
border: 1px blue solid;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
width: 105px;
height: 40px;
background-color: #4e6ef2;
float: left;
text-align: center;
}
.box1 {
width:649px;
margin: 50px auto 0;
height: 13px;
}
.box1 a {
text-decoration: none;
color: #222;
float: right;
}
#resou {
font-family: '黑体';
font-weight: 400;
float: left;
}
.huanyihuan {
float: right;
}
.box1 a:hover {
color: #4e6ef2;
}
.resoubang {
width: 649px;
height: 200px;
margin: 30px auto;
}
.resoubang1,.resoubang2 {
width: 300px;
height: 160px;
float: left;
margin-right: 20px;
}
.resoubang1 a,.resoubang2 a {
list-style: none;
float: left;
height: 30px;
margin-bottom: 20px;
}
.resoubang a {
text-decoration: none;
color: #222;
}
.resoubang a:hover {
color: #4e6ef2;
}
.resoubang2 p,.resoubang2 img,.resoubang1 p,.resoubang1 img{
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="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="#" class="denglu">登录</a>
<a href="#" class="shezhi">设置</a>
</div>
<div class="box">
<img src="图片材料/baidu.png" class="photo">
</div>
<div class="hezi">
<input type="text" class="text">
<input type="sumbit" id="sousuo" value="百度一下">
</div>
<div class="box1">
<a href="#" id="resou">百度热搜</a>
<img src="图片材料/youbiaoqianpng.png" class="right">
<a href="#">换一换</a>
<img src="图片材料/biaoqian2.png" class="huanyihuan">
</div>
<div class="resoubang">
<div class="resoubang1">
<a href="#">
<img src="图片材料/shangjiantou.png">上海全市社会面清零
</a>
<a href="#">
<img src="图片材料/re1.png">东航事故美方调查人员称未发布信息
</a>
<a href="#">
<img src="图片材料/re2.png">"光明正大"来合肥喜提自费隔离
</a>
</div>
<div class="resoubang2">
<a href="#">
<img src="图片材料/re3.png" class="resou3">
<p class="re3">经济运行会很快回归正常轨道</p>
</a>
<a href="#">
<img src="图片材料/re4.png">
俄方称不允许第三次世界大战爆发
</a>
<a href="#">
<img src="图片材料/re5.png">
澳门酒店女尸案嫌犯在湖南落网
</a>
</div>
</div>
</body>
</html>
效果如图所示: