<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽屉官网</title>
<link rel="icon" href="3.jpg">
<style>
*{
margin: 0;
}
a{
text-decoration: none;
}
body{
font-size: 14px;
}
.head-box{
background-color: #364e98;
width: 100%;
height: 72px;
position: fixed;
top: 0;
left: 0;
}
.head-content{
margin: auto;
width: 1116px;
height: 72px;
background-color: #178cfa;
line-height: 70px;
position: relative;
}
.head-logo1{
background: url("01.png") no-repeat 0 0;
width: 72px;
height: 72px;
float: left;
/*margin: 10px 0 0 0;*/
}
.head-logo2{
background: url("02.png") no-repeat 0 0;
width: 224px;
height: 44px;
float: left;
/*display: inline-block;*/
margin: 15px 10px 10px 10px;
}
.head-box a.action-menu{
float: left;
margin-left: 30px;
background-color: #5fb57d;
}
.head-box a.tb{
color: green;
margin-left: -6px;
padding: 1px 13px 1px 13px;
display: inline-block;
background-color: #fac237;
}
.head-box a.tb:hover{
color: #fafbfc;
background-color: #b9bdc1;
}
.head-box a.active{
background-color: #b18621;
}
.key-search{
float: right;
margin-top: 20px;
}
.key-search .search-text,.key-search a.i{
float: left;
}
.key-search .search-text{
width: 125px;
height: 37px;
color: #ffd050;
padding: 5px 3px 0 3px;
margin-top: -5px;
}
.key-search .ico{
background: url("4.png") no-repeat 0 0;
width: 46px;
height: 44px;
display: inline-block;
margin-top: 1px;
}
.key-search a.i{
background-color: #d1d5da;
width: 46px;
height: 44px;
display: inline-block;
margin-top: -4px;
border-left: none;
}
.head-content .action-nav{
position: absolute;
right: 200px;
margin-top: -70px;
margin-right: 20px;
}
.head-content .action-nav a{
color: #fafbfc;
padding: 0 10px;
display: inline-block;
}
.head-content .action-nav a:hover{
background-color: #d1d5da;
}
</style>
</head>
<body>
<div class="head-box">
<div class="head-content">
<a href="#" class="head-logo1"></a>
<a href="#" class="head-logo2"></a>
<a class="action-menu">
<a href="#" class="tb active">全部</a>
<a href="#" class="tb">42区</a>
<a href="#" class="tb">段子</a>
<a href="#" class="tb">图片</a>
<a href="#" class="tb">爱了</a>
<a href="#" class="tb">你问我答</a>
</a>
<div class="key-search">
<form action="/" method="post">
<input type="text" class="search-text" autocomplete="off">
<a href="#" class="i">
<span class="ico"></span>
</a>
</form>
</div>
<div class="action-nav">
<a href="#" class="register-btn">注册</a>
<a href="#" class="login-btn">登录</a>
</div>
</div>
</div>
<div class="main-content-box">
<div class="main-content"></div>
<div class="footer-band"></div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/zxy01/p/13216165.html