python(html 首页logo、用户头像、分层、显示下拉菜单)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .pg-header {
            height: 48px;
            background-color: #545454;
            color: white;
            line-height: 48px;
        }

        /*//Logo 居中*/
        .pg-header .logo {
            width: 200px;
            background-color: #458B00;
            text-align: center;

        }

        /*用户*/
        .pg-header .user {
            width: 160px;
            background-color: bisque;
            height: 48px;
        }

        /*当鼠标放在用户头像位置时候。背景变色*/
        .pg-header .user:hover {
            background-color: #115599;

        }

        .pg-header .user .a img {
            height: 40px;
            width: 40px;
            margin-top: 4px;
            border-radius: 50%;
        }


        /*<!-- z-index分层优先级-- >*/
        /*用户头像菜单*/
        .pg-header .user .b{
            z-index: 20;
            position: absolute;
            top: 48px;
            right: 27;
            background-color: #dddddd;
            color: black;
            width: 160px;
            display: none;
            /*隐藏用户头像下拉菜单*/
        }

        /*添加显示下拉菜单*/
        .pg-header .user:hover .b{
        display:block;
        }


        /*显示改为竖方式显示,实际为吧A标签改为块级标签*/
         .pg-header .user a{
             display: block;
         }

        .pg-content .menu {
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: red;
            z-index: 9;
        /*<!-- z-index分层优先级-- >*/
        }

        .pg-content .content {
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: darkblue;
            overflow: auto;
            /*overflow为自适应页面长度*/
        }
    </style>
</head>
<body>
<div class="pg-header">
    <!--<div style="width: 100px;margin: 0 auto">-->
    <!--自动居中-->
    <!--</div>-->
    <div class="logo left">
        <!--向左对齐。-->
        Sooele
    </div>

    <div class="user right" style="position: relative">
        <!--向右对齐-->
        <a class="a" href="#">
            <!--href="#"默认跳转为当前-->
            <img style="height: 40px; width: 40px;margin-top: 4px;border-radius: 50%"
                 src="https://secure.gravatar.com/avatar/a553c75a1cd244e47d9aec48b88bd543">
            <!--border-radius: 50%  头像变为圆边框。。当数值为px时候为方-->
        </a>

        <div class="b" >
            <a>我的资料</a>
            <a>注销</a>
        </div>

    </div>
</div>


<div class="pg-content">
    <div class="menu left">a</div>
    <div class="content left">
        <!--</p><p>asd</p>-->
        <!--<p>asd</p>-->
        <!--<p>asd</p>-->
        <!--<p>asd</p>-->
    </div>

</div>


<div class="pg-footer"></div>
</body>
</html>

发表评论