<!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>

抽屉header的更多相关文章

  1. iOS开发之抽屉效果实现

    说道抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController.一说到第三方类库就自然而然的想到我们的CocoaPods,今天的博客中用CocoaPods引入PPR ...

  2. tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...

  3. Android DrawerLayout 抽屉

    Android DrawerLayout 抽屉 DrawerLayout 在supportV4 Lib在.类似的开源slidemenu如,DrawerLayout父类ViewGroup,自定义组件基本 ...

  4. CSS快速入门-前端布局1(抽屉）

    一.效果图 前面对CSS基础知识有了一定的了解,是时候开始实战了!以下我对抽屉(https://dig.chouti.com/)主页进行模拟布局. 官方网站效果图: 模拟网站图: 二.实现步骤 1.整 ...

  5. 使用ViewDragHelper打造属于自己的DragLayout（抽屉开关 ）

    使用ViewDragHelper打造属于自己的DragLayout(抽屉开关 ) DrawLayout这个自己定义的空间非经常见.qq,网易新闻.知乎等等,都有这样的效果,那这样的效果是如何实现的呢? ...

  6. day19 Models补充+缓存+信号+序列化+分析抽屉页面

    参考链接: http://www.cnblogs.com/wupeiqi/articles/5237704.html http://www.cnblogs.com/wupeiqi/articles/5 ...

  7. 本博文将一步步带领你实现抽屉官网的各种功能：包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...

  8. Flutter学习笔记（18）--Drawer抽屉组件

    如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...

  9. RestTemplate发送请求并携带header信息

    1.使用restTemplate的postForObject方法 注:目前没有发现发送携带header信息的getForObject方法. HttpHeaders headers = new Http ...

随机推荐

  1. Python操作Execl 实现自动化填表

    任务简述: 表1是一个简单的数据表,共有110行,25列.第1行是表头,例如“负责人”.“事项”.“期限”等. 第2行——第110行是对应的数据,如“张三”.“搬砖头”.“3天”. 想要做的表(表2) ...

  2. mac 升级系统后 ”任何来源“被取消了找回方法

    找回方法 终端输入: sudo spctl --master-disable

  3. Intellj IDEA光标替insert状态，back键无法删除内容

    Intellj IDEA光标为insert状态,无法删除内容导入项目后,发现打开java文件的光标是win系统下按了insert键后的那种宽的光标,并且还无法删除内容,且按删除(delete)键也只见 ...

  4. Oracle -- 连接每行的内容

    select wm_concat(message) from (        select rownum no, 'Case ''' || code || '''' || '' || chr(10) ...

  5. 【剑指Offer学习】【面试题58：二叉树的下一个结点】

    题目:给定一棵二叉树和当中的一个结点.怎样找出中序遍历顺序的下一个结点?树中的结点除了有两个分别指向左右子结点的指针以外,另一个指向父节点的指针. 解题思路 假设一个结点有右子树.那么它的下一个结点就 ...

  6. iOS怎样获取任何App的资源图片？

    1.打开iTunes,并与手机相连接 2.按照下图所示执行搜索并下载App 3.到Mac的 /Users/apple/Music/iTunes/iTunes Media/Mobile Applicat ...

  7. Swift 学习笔记 (函数)

    函数 函数是一个独立的代码块,用来执行特定的任务.Swift中的函数与Object-C中的函数一样,但是声明与书写的方式不太一样,现在我们就通过几个例子介绍一下Swift中的函数.简单的来说,他与JS ...

  8. 利用socket.io实现多人聊天室(基于Nodejs)

    socket.io简单介绍 在Html5中存在着这种一个新特性.引入了websocket,关于websocket的内部实现原理能够看这篇文章.这篇文章讲述了websocket无到有,依据协议,分析数据 ...

  9. ZooKeeper原理及使用(转)

    原文地址 ZooKeeper是Hadoop Ecosystem中非常重要的组件,它的主要功能是为分布式系统提供一致性协调(Coordination)服务,与之对应的Google的类似服务叫Chubby ...

  10. Hibernate load 和 Get的区别

    load和get都可以取回一个对象,难道是方法重复吗?绝对不可能,那它们到底有那些区别呢? 在http://blog.chinaunix.net/u/484/showart_1093166.html这 ...