zoukankan      html  css  js  c++  java

  • 管理界面的头2

     参考：http://www.cnblogs.com/wuqianling/p/6762146.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #header {
            min-width: 760px;
            background-color: #3a8ee6;
            height: 38px;
            position: relative;
        }

        #header .logo {
            padding: 10px 10px 0 20px;
            float: left;
        }

        #header > ul {
            float: left;
            display: inline-block;
            list-style-type: none;
            line-height: 38px;
        }

        #header > ul > li {
            list-style-type: none;
            display: inline-block;
        }

        #header > ul > li > a {
            display: inline-block;
            text-decoration: none;
            padding: 0 20px;
            color: whitesmoke;
        }

        #header > ul > li > a:hover {
            background-color: #66b1ff;
            color: #000028;
        }

        #header .headerright {
            float: right;
        }

        #userpanel {
            width: 280px;
            height: 400px;
            background-color: #e6a23c;
            display: none;
            position: absolute;
            top: 40px;
            right: 20px;
        }

        .clear {
            clear: both;
        }


        /* -------------菜单css代码----------begin---------- */
        .menuDiv {
            border: 1px solid #aac;
            overflow: hidden;
            display: inline-block;
        }

        /* 去掉a标签的下划线 */
        .menuDiv a {
            text-decoration: none;
        }

        /* 设置ul和li的样式 */
        .menuDiv ul, .menuDiv li {
            list-style: none;
            margin: 0;
            padding: 0;
            float: left;
        }

        /* 设置二级菜单绝对定位，并隐藏 */
        .menuDiv > ul > li > ul {
            position: absolute;
            display: none;
        }

        /* 设置二级菜单的li的样式 */
        .menuDiv > ul > li > ul > li {
            float: none;
        }

        /* 鼠标放在一级菜单上，显示二级菜单 */
        .menuDiv > ul > li:hover ul {
            display: block;
        }

        /* 一级菜单 */
        .menuDiv > ul > li > a {
            width: 120px;
            line-height: 36px;
            color: black;
            background-color: #cfe;
            text-align: center;
            border-left: 1px solid #bbf;
            display: block;
        }

        /* 在一级菜单中，第一个不设置左边框 */
        .menuDiv > ul > li:first-child > a {
            border-left: none;
        }

        /* 在一级菜单中，鼠标放上去的样式 */
        .menuDiv > ul > li > a:hover {
            color: #f0f;
            background-color: #bcf;
        }

        /* 二级菜单 */
        .menuDiv > ul > li > ul > li > a {
            width: 120px;
            line-height: 36px;
            color: #456;
            background-color: #eff;
            text-align: center;
            border: 1px solid #ccc;
            border-top: none;
            display: block;
        }

        /* 在二级菜单中，第一个设置顶边框 */
        .menuDiv > ul > li > ul > li:first-child > a {
            border-top: 1px solid #ccc;
        }

        /* 在二级菜单中，鼠标放上去的样式 */
        .menuDiv > ul > li > ul > li > a:hover {
            color: #a4f;
            background-color: #cdf;
        }

        /* -------------菜单css代码----------end---------- */

    </style>
    <link rel="stylesheet" href="static/css/font-awesome.css">


</head>
<body>

<div class="container">

    <div id="header">
        <img class="logo" src="static/logo.png"/>
        <ul>
            <li><a href="test2.html"><i class="fa fa-home"></i>&nbsp;首页</a></li>
            <li><a href="test2.html"><i class="fa fa-superpowers"></i>&nbsp;产品介绍</a></li>
            <li><a href="test2.html"><i class="fa fa-book"></i>&nbsp;奇葩特色</a></li>
            <li><a href="test2.html"><i class="fa fa-link"></i>&nbsp;关于我们</a></li>
        </ul>
        <div class="headerright ">
            <!-- -------菜单html代码---------begin------- -->
            <div class="menuDiv">
                <ul>
                    <li>
                        <a href="#">菜单一</a>
                        <ul>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">菜单二</a>
                        <ul>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- -------菜单html代码---------end------- -->
        </div>


    </div>

</div>

</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #header {
            min-width: 760px;
            background-color: #3a8ee6;
            height: 38px;
            position: relative;
        }

        #header .logo {
            padding: 10px 10px 0 20px;
            float: left;
        }

        #header > ul {
            float: left;
            display: inline-block;
            list-style-type: none;
            line-height: 38px;
        }

        #header > ul > li {
            list-style-type: none;
            display: inline-block;
        }

        #header > ul > li > a {
            display: inline-block;
            text-decoration: none;
            padding: 0 20px;
            color: whitesmoke;
        }

        #header > ul > li > a:hover {
            background-color: #66b1ff;
            color: #000028;
        }

        #header .headerright {
            float: right;
        }

        #userpanel {
            width: 280px;
            height: 400px;
            background-color: #e6a23c;
            display: none;
            position: absolute;
            top: 40px;
            right: 20px;
        }

        .clear {
            clear: both;
        }


        /* -------------菜单css代码----------begin---------- */
        .menuDiv {
            border: 1px solid #aac;
            overflow: hidden;
            display: inline-block;
        }

        /* 去掉a标签的下划线 */
        .menuDiv a {
            text-decoration: none;
        }

        /* 设置ul和li的样式 */
        .menuDiv ul, .menuDiv li {
            list-style: none;
            margin: 0;
            padding: 0;
            float: left;
        }

        /* 设置二级菜单绝对定位，并隐藏 */
        .menuDiv > ul > li > ul {
            position: absolute;
            display: none;
        }

        /* 设置二级菜单的li的样式 */
        .menuDiv > ul > li > ul > li {
            float: none;
        }

        /* 鼠标放在一级菜单上，显示二级菜单 */
        .menuDiv > ul > li:hover ul {
            display: block;
        }

        /* 一级菜单 */
        .menuDiv > ul > li > a {
            width: 120px;
            line-height: 36px;
            color: black;
            background-color: #cfe;
            text-align: center;
            border-left: 1px solid #bbf;
            display: block;
        }

        /* 在一级菜单中，第一个不设置左边框 */
        .menuDiv > ul > li:first-child > a {
            border-left: none;
        }

        /* 在一级菜单中，鼠标放上去的样式 */
        .menuDiv > ul > li > a:hover {
            color: #f0f;
            background-color: #bcf;
        }

        /* 二级菜单 */
        .menuDiv > ul > li > ul > li > a {
            width: 120px;
            line-height: 36px;
            color: #456;
            background-color: #eff;
            text-align: center;
            border: 1px solid #ccc;
            border-top: none;
            display: block;
        }

        /* 在二级菜单中，第一个设置顶边框 */
        .menuDiv > ul > li > ul > li:first-child > a {
            border-top: 1px solid #ccc;
        }

        /* 在二级菜单中，鼠标放上去的样式 */
        .menuDiv > ul > li > ul > li > a:hover {
            color: #a4f;
            background-color: #cdf;
        }

        /* -------------菜单css代码----------end---------- */

    </style>
    <link rel="stylesheet" href="static/css/font-awesome.css">


</head>
<body>

<div class="container">

    <div id="header">
        <img class="logo" src="static/logo.png"/>
        <ul>
            <li><a href="test2.html"><i class="fa fa-home"></i>&nbsp;首页</a></li>
            <li><a href="test2.html"><i class="fa fa-superpowers"></i>&nbsp;产品介绍</a></li>
            <li><a href="test2.html"><i class="fa fa-book"></i>&nbsp;奇葩特色</a></li>
            <li><a href="test2.html"><i class="fa fa-link"></i>&nbsp;关于我们</a></li>
        </ul>
        <div class="headerright ">
            <!-- -------菜单html代码---------begin------- -->
            <div class="menuDiv">
                <ul>
                    <li>
                        <a href="#">菜单一</a>
                        <ul>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- -------菜单html代码---------end------- -->
        </div>


    </div>

</div>

</body>
</html>
  • 相关阅读:
    全排列和几道例题
    NOJ1333: [蓝桥杯2017初赛]Excel地址
    力扣5-最长回文子串-（Manacher算法）
    CF1003E-Tree Constructing-(构造+dfs)
    NOJ1329:[蓝桥杯2017初赛]k倍区间-(前缀和)
    Java 时间
    小魂和他的数列-(离散+二分+树状数组)
    AC自动机入门和几道例题
    java写入加速
    清理 Excel 导出的 HTML 的多余属性
  • 原文地址：https://www.cnblogs.com/yasepix/p/10329698.html
Copyright © 2011-2022 走看看