2021/08/19
<!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: 40px;
margin: 10px 94px;
display: flex;
justify-content: space-around;
text-decoration: none;
color: #FFFFFF;
background-color: transparent;
}
ul li {
text-align: center;
display: flex;
justify-content: space-around;
background-color: transparent;
/*background-color: #0266a3;*/
list-style: none;
float: left;
}
</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>
<div id="body2">
<div class="bodyleft"></div>
<div class="bodyright"></div>
</div>
<div id="footer">
<div class="footertop"></div>
<div class="footerbottom"></div>
</div>
</body>
</html>
把最实用的经验,分享给最需要的读者,希望每一位来访的朋友都能有所收获!