html前端后台导航框架

时间：2017-09-23 13:35:27 阅读：251 评论：0 收藏：0 [点我收藏+]

标签：menu otto 修改 htm order png ade .com link

框架预览：

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">//载入图标库

<style type="text/css">
    body{
        margin: 0;
    }
    .header{
        height:48px;
        background-color: #2459a2;
        color: white;
        line-height: 48px; //将字体上下居中

    }
    .header .icons{
        padding:0 10px;//内变宽
        font-size: 2px;

    }
    .header .fort{
        display: inline-block;
    padding: 0px 5px;
    background-color: red;
    border-radius: 64%;
    line-height: 20px;  //行高
    }

    .header .icons:hover{//鼠标滑过就会出现背景框
        background-color: #020d1f
    }
    .header .logo{
        width: 200px;
        text-align: center;//字体左右居中


    }
    .header .user{
        height: 48px;
        margin-right: 77px;
        padding: 0 20px;

        position: relative;
    }
    .header .user:hover{
      background-color: #020d1f
    }
    .header .user .a img{
         z-index: 20 ;
        width: 40px;
        height:40px;
        margin-top: 4px;
        border-radius: 50%;
    }
    .header .user .b {
        z-index: 20;
        background-color: ghostwhite;
        color: black;
        position: absolute;
        top:48px;
        right: 40px;
        width: 160px;
        display: none;
    }
     .header .user:hover .b{
        display: block;

    }

    .header .user .b a{
        display: block;



    }
    .left{
        float:  left ;

    }
    .right{
        float: right;
    }
    .content .menu{
       position: fixed;
        top: 48px;
        left: 0;
        bottom: 0;
        width: 200px;

        background-color: #dddddd;

    }

    .content .menu1{
        position: absolute;
        top:48px;
        right:0;
        bottom:0;
        left: 200px;
        background-color: purple;
        z-index: 10;
        overflow: auto; //设置滚动条，永远固定在某个窗口位置上，relative--单独无意义，absolute--第一次定位，可以指定，滚动时，就不在了
    }

</style>
</head>
<body>
    <div class="header">
        <div class="logo left">
            Python
             </div>
        <div class="user right ">

            <a class="a" href="#">
                <img    src=" 416.jpg">
            </a>

            <div class="b">

                <a>我的资料</a>
                <a>修改资料</a>
                <a>进入空间</a>
                <a>退出登入</a>

            </div>

        </div>

                    <div class="icons right">

                <i class="fa fa-tv" aria-hidden="true"></i>
                 <span style="font-size: 2px">数据中心</span>
                    </div>
        <div class="icons right">
             <i class="fa fa-envelope-o" aria-hidden="true">  我的邮件</i>
         <span class="fort">99+</span>

             </div>

        <div class="icons right">
             <i class="fa fa-user-circle" aria-hidden="true">  我的主页</i>
             </div>




        </div>


    <div class="content">
        <div class="menu left"></div>
        <div class="menu1 left">

        </div>

    </div>

    <div class="footer"></div>


<script src="commons.js"></script>
</body>
</html>

html前端后台导航框架

标签：menu otto 修改 htm order png ade .com link

原文地址：http://www.cnblogs.com/Mjonj/p/7580855.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行