index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<title></title>
</head>
<body>
<header>
<ul class="left">
<li><a href="#">新闻</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">学术</a></li>
<li><a href="#">更多</a></li>
</ul>
<ul class="right">
<li><a href="#">设置</a></li>
<li><a href="#">登录</a></li>
</ul>
</header>
<div class="search">
<img src="imgs/dong_528d34b686d4889666f77c62b9a65857.gif" alt="">
<div class="sou">
<form action="">
<span class="sou_wrapper"><input type="search" name="" id="" value="" /></span>
<span class="submit_wrapper"><input type="submit" name="" id="" value="百度一下" /></span>
</form>
</div>
</div>
<div class="hot">
<a href="#" class="baidu_hot">百度热榜</a>
<a href="#" class="change">换一换</a>
</div>
<ol class="news">
<li><a href="#">1 瑞丽新增6例确诊23例无症状</a></li>
<li><a href="#">2 瑞丽新增6例确诊23例无症状</a></li>
<li><a href="#">3 瑞丽新增6例确诊23例无症状</a></li>
<li><a href="#">3 瑞丽新增6例确诊23例无症状</a></li>
<li><a href="#">3 瑞丽新增6例确诊23例无症状</a></li>
<li><a href="#">3 瑞丽新增6例确诊23例无症状</a></li>
<li><a href="#">3 瑞丽新增6例确诊23例无症状</a></li>
<li><a href="#">3 瑞丽新增6例确诊23例无症状</a></li>
</ul>
<div class="footer">
<ul>
<li><a href="#">设为首页</a></li>
<li><a href="#">关于百度</a></li>
<li><a href="#">About Baidu</a></li>
<li><a href="#">百度营销</a></li>
<li><a href="#">使用百度前必读</a></li>
<li><a href="#">意见反馈</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">京公网安备11000002000001号</a></li>
<li><a href="#">京ICP证030173号</a></li>
<li>©2021 Baidu </li>
<li>(京)-经营性-2017-0020</li>
</ul>
</div>
</body>
</html>
index.css
header{
position:relative;
width:100%;
top:0;
left:0;
height:55px;
}
li{
list-style:none;
}
.left{
position: absolute;
left: 15px;
top: 0px;
}
.left li {
float:left;
padding:18px 15px;
}
.right{
position: absolute;
right: 15px;
top: 0;
}
.right li{
float:left;
padding:18px 15px;
}
.right li:nth-child(2) a{
background-color:#4E6EF2;
color:white;
padding:3px 10px;
border-radius:5px;
}
a{
text-decoration:none;
}
header .left li a:hover{
color:#4E6EF2;
}
header .right li:nth-child(1) a:hover{
color:#4E6EF2;
}
body .search{
width: 100%;
}
body .search img{
display: block;
width:270px;
height:129px;
margin: 0 auto;
margin-bottom: 15px;
}
.sou{
width: 656px;
height: 44px;
margin: 0 auto;
line-height: 44px;
}
.sou .sou_wrapper{
display: block;
float: left;
width: 548px;
height: 44px;
}
.sou .sou_wrapper input{
width: 548px;
height: 44px ;
border: 1px solid rgb(196, 199, 206);
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-right: none;
}
.sou .submit_wrapper{
display: block;
float: left;
width: 106px;
height: 44px;
}
.sou .submit_wrapper input{
width: 104px;
height: 44px;
background-color: #4e6ef2;
border: 1px solid #4e6ef2;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
color: white;
font-size: 17px;
}
.hot{
position: relative;
width: 654px;
height: 24px;
margin: 0 auto;
margin-top: 50px;
font-size: 14px;
}
.hot .baidu_hot{
position: absolute;
top:0;
left: 0;
}
.hot .change{
position: absolute;
top:0;
right: 0;
font-size: 13px;
color: #9195a3;
}
.hot .change:hover{
color: #4E6EF2;
}
.hot .change::before{
content: ;
}
.news{
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 654px;
height: 150px;
margin: 0 auto;
justify-content: space-between;
}
.news li{
height: 32px;
}
.news li a{
line-height: 32px;
font-size: 14px;
}
.news li a:hover{
color: #4E6EF2;
}
/* footer部分 */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 38.89px;
background-color: white;
}
.footer ul{
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
padding-top: 12px;
color: #BBBBBB;
font-size: 12px;
}
.footer ul li a{
text-align: center;
color: #BBBBBB;
font-size: 12px;
}
.footer ul li a:hover{
color: black;
}
base.css
*{
margin: 0;
padding: 0;
font-style: "Microsoft YaHei";
box-sizing: border-box;
font-size: 13px;
box-sizing: border-box;
}
/* body{
margin: 0 auto;
} */
a{
text-decoration: none;
color: black;
}
li{
list-style: none;
}