效果展示：
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>技术交流分享网站</title>
<style>
*{
margin: 0;
padding: 0;
background-color: #EBEBE9;
}
#header1{
display: flex;
justify-content: center;
font-size: 15px;
color:#595959;
width: 80%;
height:40px;
line-height: 40px;
/*text-align: center;*/
margin: 0 auto;
cursor: pointer;
}
.headl{
width: 80%;
height: 40px;
}
.headr{
width: 20%;
height:40px;
line-height: 40px;
text-align: center;
}
hr{
width: 100%;
}
#header2{
width: 80%;
height: 100px;
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.logo{
width: 70%;
height: 100%;
color: #ff0000;
font-weight: bolder;
font-size: 48px;
}
.search {
width: 30%;
height: 80%;
/*margin: auto 0;*/
margin-top: 15px;
display: flex;
justify-content: space-between;
}
.inp{
padding: 2px;
width: 80%;
height: 30px;
border-radius: 38px;
border: none;
outline: none;
background-color: #FFFFFF;
margin: 1px;
font-size: 20px;
/*display: flex;*/
/*justify-content: center;*/
}
.inp-l{
/*height: 15px;*/
width: 80%;
height: 80%;
margin: 3px 2px;
/*margin-top: 3px;*/
background-color: #EDEFEC;
border-radius: 10px;
float: left;
border: 0;
}
input{
outline: none;
}
input:focus{
outline: none;
}
#nav{
width: 80%;
height: 60px;
margin: 0 auto;
background-color: #0266a3;
border-radius: 20px;
box-shadow:0 15px 35px rgba(0,0,0,0.1);
}
a{
width: 100px;
height: 20px;
margin: 20px 70px;
display: flex;
justify-content: space-around;
text-decoration: none;
color: #FFFFFF;
background-color: transparent;
}
ul li {
width: 20%;
text-align: center;
display: flex;
justify-content: space-around;
background-color: transparent;
/*background-color: #0266a3;*/
list-style: none;
float: left;
}
#body1{
width: 100%;
/*把行高和div高度设置成一样的，是因为 vertical-align 是相对于line-heigjt设置的*/
height: 300px;
line-height: 300px;
background-color: aqua;
/*水平居中*/
text-align: center;
}
.switch{
/*对于vertical-align来说对行内元素起作用*/
display: inline-block;
vertical-align: middle;
width: 80%;
height: 274px;
background-color: dodgerblue;
}
#footer{
width: 100%;
height: 60px;
background-color: aqua;
margin: 0 auto;
}
.location{
color: #EBEBE9;
background-color: aqua;
margin: 0 auto;
}
.footertop{
width: 22%;
height: 60%;
font-size: 150%;
}
.footerbottom{
width: 26%;
height: 40%;
font-size: 90%;
}
#body2{
width: 80%;
height: 320px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.bd{
width: 48%;
height: 100%;
background-color: #0266a3;
}
hr{
border: 2px solid antiquewhite;
/*color: antiquewhite;*/
}
</style>
</head>
<body>
<div id="header1">
<div class="headl">您好，欢迎来到技术交流分享社区！</div>
<div class="headr">登录 | 注册 | Chinese</div>
</div>
<hr/>
<div id="header2">
<div class="logo">l o g o</div>
<div class="search">
<div class="inp">
<input type="text" placeholder="请输入搜索内容" class="inp-l">| 搜索
</div>
</div>
</div>
<div id="nav">
<ul>
<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>
</div>
<div id="body1">
<div class="switch"></div>
</div>
<div id="body2">
<div class="bodyleft bd">
<div class="bod1"></div>
<!-- <hr/>-->
<div class="bod2"></div>
<div class="bod3"></div>
</div>
<div class="bodyright bd"></div>
</div>
<div id="footer">
<div class="footertop location">AAAA | BBBB | CCCC | DDDD</div>
<div class="footerbottom location"> Copyright @1999-2021 虎康在线教育 | 晋ICP备13019762号</div>
</div>
</body>
</html>