<!DOCTYPE html>
<html lang="en">
<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>
*{
margin: 0;
}
body{
background-color: #f6f6f6;
}
.header-content{
background-color: #fff;
}
.header-wrapper{
margin: 0 auto;
height: 52px;
min-width: 1000px;
max-width: 1156px;
display: flex;
align-items: center;
}
.header-logo {
margin-right: 40rpx;
}
.header-logo img{
width: 61px;
height: 45px;
background: #5082ff;
}
.header-nav{
text-decoration: none;
list-style: none;
display: flex;
}
.header-nav li {
margin-right: 30px;
}
.header-search{
flex-grow: 1;
display: flex;
justify-content: center;
}
.header-search-wrapper{
max-width: 482px;
height: 34px;
flex-grow: 1;
display: flex;
background: #f6f6f6;
border-radius: 100px;
align-items: center;
}
.header-search-input{
border: none;
background: none;
outline: none;
margin: 0 20px;
flex: 1;
}
.header-search-wrapper i{
margin: 0 20px;
}
.header-btn{
display: flex;
}
.header-btn-logo{
width: 60px;
height: 32px;
border: 1px solid #0066ff;
border-radius: 3px;
color: #0066ff;
background: none;
cursor: pointer;
display: block;
margin-right: 20px;
}
.header-btn-zhihu{
width: 90px;
height: 32px;
background: #0066ff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
display: block;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="header-content">
<div class="header-wrapper">
<div class="header-logo">
<a href=""><img src="https://static.zhihu.com/static/revved/img/sticky_header/new_logo@2x.9187366b.png" alt=""></a>
</div>
<ul class="header-nav">
<li>首页</li>
<li>会员</li>
<li>发现</li>
<li>等你来答</li>
</ul>
<div class="header-search">
<div class="header-search-wrapper">
<input class="header-search-input" type="text" placeholder="520文案">
<i class="fangdajing">search</i>
</div>
</div>
<div class="header-btn">
<button class="header-btn-logo">登录</button>
<button class="header-btn-zhihu">加入知乎</button>
</div>
</div>
</div>
</body>
</html>
