html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="baibuA.css">
</head>
<body>
<div class="content">
<div class="top">
<ul>
<li><a href="#"class="a1">新闻</a></li>
<li><a href="#"class="a1">hao123</a></li>
<li><a href="#"class="a1">地图</a></li>
<li><a href="#"class="a1">视频</a></li>
<li><a href="#"class="a1">贴吧</a></li>
<li><a href="#"class="a1">学术</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">设置</a></li>
<li><a href="#" class="more">更多产品</a></li>
</ul>
</div>
<div class="middle">
<img src="images/百度.gif" alt="" class="bdimg">
<br>
<input type="text "class="txt">
<input type="button" value="百度一下" class="btn">
<br>
<img src="images/二维码.png" alt="" class="ewmimg">
<br>
<span >下载百度APP</span>
<br>
<span class="span1">有事搜一搜 没事看一看</span>
</div>
<div class="button">
<ul class="buttonul">
<li><a href="#">把百度设为主页</a></li>
<li><a href="#">关于百度</a></li>
<li><a href="#">About Baidu</a></li>
<li><a href="#">百度推广</a></li>
<li>(京)-经营性-2017-0020</li>
</ul>
<br>
<ul class="buttonu2">
<li>©2020 Baidu </li>
<li><a href="#">使用百度前必读</a></li>
<li><a href="#">意见反馈</a></li>
<li>京ICP证030173号</li>
<li><a href="#" class="last">京公网安备11000002000001号</a></li>
</ul>
</div>
</div>
</body>
</html>
**
css部分
**
*{
margin: 0;
padding: 0;
}
.content{
width: 100%;
height: 625px;
}
.top{
width: 100%;
height: 10%;
/*background-color: #FF8140;*/
}
.top ul{
list-style: none;
/*border: 1px black solid;*/
margin-left: 62%;
padding-top: 20px;
}
.top li{
float: left;
margin-left: 20px;
/*border: 1px black solid;*/
text-align: center;
}
.top a{
color: black;
font-size: 13px;
}
.top .a1{
font-size: 13px;
color: black;
font-weight: bolder;
}
.top .more{
background-color: #3385FF;
color: white;
text-decoration: none;
display: inline-block;
width: 60px;
height: 24px;
/*text-align: center;*/
line-height: 24px;
margin-top: -3px;
}
.top .more:hover{
background-color: #B8B8B8;
color: black;
}
.middle{
width: 100%;
height: 70%;
/*background-color: #3385FF;*/
text-align: center;
}
.middle .bdimg{
width: 260px;
height: 132px;
margin-top: -20px;
}
.middle .txt{
margin-top: 20px;
width: 510px;
height: 32px;
margin-left: -15px;
}
.middle .txt :focus{
border: #3385FF 1px solid;
}
.middle .btn{
background-color: #3385FF;
color: white;
display: inline-block;
width: 100px;
height: 36px;
border: 0;
outline: none;
font-size: 18px;
position: relative;
top: 3px;
margin-left: -5px;
}
.middle .ewmimg{
padding-top: 60px;
width: 120px;
height: 120px;
}
.middle .span1{
font-size: 14px;
color: #B9B9B9;
}
.button{
width: 100%;
height: 20%;
/*background-color: green;*/
}
.button .buttonul{
list-style: none;
padding-top: 20px;
margin-left: 30%;
}
.button li{
float: left;
font-size: 12px;
color: #888C94;
}
.button .buttonul li{
margin-left: 20px;
}
.button a{
/*text-decoration: none;*/
color: #888C94;
}
.button .buttonu2{
list-style: none;
margin-left: 27%;
}
.button .buttonu2 li{
margin-left: 15px;
}
.button .last{
margin-left: 25px;
}
效果：
