仿知乎顶部 导航菜单
作者：互联网
<!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>
标签：flex,none,菜单,仿知乎,margin,header,background,导航,display 来源： https://www.cnblogs.com/eric-share/p/15364480.html