抽屉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>

相关阅读:
责任链模式小试
 C++学习笔记(3)
C++学习笔记(2)
C++学习笔记(1)
基本排序（二）插入排序(直接插入、Shell、折半)
基本排序（一）交换排序(冒泡、快速)
Spring Initializr生成的demo测试404错误
 Java生成二进制文件与Postman以二进制流的形式发送请求
 SSH工具脚本录入
 Spring Bean自动注册的实现方案
原文地址：https://www.cnblogs.com/wangmo/p/8047061.html