管理界面的头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>

 

posted @ 2019-01-28 12:27  yasepix  阅读(121)  评论(0)  编辑  收藏  举报