抽屉的标题编写 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
        margin: 0;/*无边距*/
        padding: 0;/*无边距*/
    }
    a{
            text-decoration: none;/*默认不加下划线*/
        }
    body{
    font-family: "Times New Roman";
        font-size: 12px;
    }
        /*----------head部分开始*/
        .head-box{
            background-color: #2459a2;
            height: 44px;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }
        .head-content{
            width: 1016px;
            background-color:#396bb3;
            height: 44px;
            line-height: 44px;
            margin: 0 auto;/*居中*/
            position: relative;/*相对定位*/
        }
        .head-content .logo{
            display: inline-block;/*块级*/
            background: url("123.jpg");
            width: 121px;
            height: 23px;
            float: left;
            margin-top: 11px;
        }
        .head-content .action-menu{
            float: left;
            margin-left: 5px;
        }
        .head-content .action-menu a.tb{
            display: inline-block;
            float: left;

            margin-left: -3px;
            /*border: 1px solid red;*/
            padding: 0 16px 0 13px;

        }
         .head-content .action-menu a.tb:hover{/*a标签名点类名调用*/
             color: white;
             background: #396bb3;
             /*a:link {color: #FF0000} /* 未访问时的状态 。
             a:visited {color: #00FF00} /* 已访问过的状态
             a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态。
             a:active {color: #0000FF} /* 鼠标按下去时的状态 。
             */
         }
         .head-content .action-menu a.active,.head-content .action-menu a.active:hover{/*a标签名点类名调用*/
             color: white;
             background: #204982;
         }
        .key-search{
            float: right;
            margin-top: 5px;
        }
        .key-search .search-txt{
            float: left;
            width: 91px;
            height: 25px;
            padding: 2px 2px 2px 5px;
        }
        .key-search a{
            display: inline-block;/*可以设置长款*/
            width: 31px;
            height: 32px;
            background: #f4f4f4;
        }
        .key-search a span.ico{/*span标签名点类名调用*/
            display: inline-block;
            width: 11px;
            height: 13px;
            background: url("123.jpg");
            margin-left: 10px;/*2个div之间用margin或者inlineblock*/
            margin-top: -3px;
        }
        .action-nav{
            position: absolute;/*这里绝对定位（脱离文档流)，上面head-congtent相对定位*/
            right: 150px;

        }
        .action-nav a{
            display: inline-block;
            line-height: 44px;
            color: white;
            margin: 0 5px;
            padding: 0 20px;

        }
        .action-nav a:hover{
            background-color: #396bb3;
        }
</style>
</head>
<body>
<div class="head-box">
<div class="head-content">
    <a href="#"class="logo"></a>
    <div class="action-menu">
        <a href="#" class="tb active">全部</a>
        <a href="#"class="tb">段子</a>
        <a href="#"class="tb">图片</a>
        <a href="#"class="tb">你问我答</a>
        <a href="#"class="tb">42区</a>
        <a href="#"class="tb">挨踢1024</a>

    </div>
    <div class="key-search">
        <form action="/" method="post">

            <input type="text" class="search-txt">
            <a href="#" class="i">
                <span class="ico"></span>
            </a>

        </form>

    </div>
</div>
</div>
<div class="main-content-box">
    <div class="content-L"></div>
    <div class="content-R"></div>
    <div class="footer-box"></div>
</div>

</body>
</html>

 

posted @ 2018-06-13 20:58  未来的技术  阅读(143)  评论(0)    收藏  举报