抽屉header
<!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"> <title>Title</title> <style> *{ margin:0; padding: 0; font-size: 12px; } a{ text-decoration: none; } a.i{ width: 30px; height: 29px; /*background-color: white;*/ display: inline-block; float: left; /*margin-top: 2px;*/ } .ico{ width: 11px; height: 12px; display: inline-block; margin-left: 11px; margin-top: 9px; background-image: url("http://dig.chouti.com/images/icon.png"); background-repeat: no-repeat; background-position: 0 -197px; } .header{ width: 100%; height: 44px; background-color: #2459a2; position: fixed; } .header-content{ width: 1026px; margin: 0 auto; /*background-color: grey;*/ height: 44px;; line-height: 44px; } .logo{ width: 121px; height: 23px; background: url(http://dig.chouti.com/images/logo.png) no-repeat 0 0; float: left; margin-top: 11px; } .menu{ float: left; margin-left: 20px; } .menu a{ color: #c0cddf; padding: 0 13px 0 16px; display: inline-block; margin-left: -3px; } .menu .menu_0{ background: #204982; color: white; } .menu .menu_1:hover{ color: white; background-color:#3266ad ; } .search{ float: right; margin-top: 6px; display: block; background-color: white; } .search_text{ color: #333; padding: 2px 2px 2px 5px; height: 25px; width: 91px; float: left; } .content_right a:hover{ background:#3266ad ; } .content_right a{ color: white; float: right; display: inline-block; /*margin-left: 20px;*/ padding:0 20px; } . </style> </head> <body> <div class="header"> <div class="header-content"> <a href="" class="logo"></a> <div class="menu"> <a href="" class="menu_0">全部</a> <a href="" class="menu_1">42区</a> <a href="" class="menu_1">段子</a> <a href="" class="menu_1">图片</a> <a href="" class="menu_1">挨踢1024</a> <a href="" class="menu_1">你问我答</a> </div> <div class="search"> <form action="" method="post" name="search_form"> <input type="text" class="search_text" name="search_text" > <a href="" class="i"> <span class="ico"></span> </a> </form> </div> <div class="content_right"> <a href="" class="register">登录</a> <a href="" class="login">注册</a> </div> </div> </div> </body> </html>