hover_小脚本

2020-09-12 19:34:08 作者：互联网
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .page-header{
            height: 48px;
            line-height: 48px;
            background-color: #036ad2;
            color: white;
        }
        .page-body .body-menu{
            position: absolute;
            top: 48px;
            bottom: 0;
            left: 0;
            width: 200px;
            border: 1px solid red;
        }
        .page-body .body-content{
            position: absolute;
            top: 48px;
            bottom: 0;
            left: 210px;
            right: 10px;
            width: auto;
            border: 1px solid red;
            overflow: auto;
            z-index: 10;
        }

        .page-header .log{
            /*float: left;*/
            width: 200px;
            /*line-height: 48px;*/
            text-align: center;
        }
        .page-header .user{
            /*float: right;*/
            width: 25px;
            height: 48px;
            /*line-height: 48px;*/
            text-align: center;
            padding: 0 25px;
            position: relative;
        }

        .page-header .user .more{
            width: 100px;
            position: absolute;
            top: 48px;
            right: 60px;
            background-color: #959da5;
            display: none;
        }

        .page-header .user .more a{
            display: block;
        }

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

        }
        .page-header .user:hover{
            background-color: #ffd050;
        }

        .page-header .user:hover .more{
            z-index: 99;
            display: block;
        }


    </style>

</head>
<body>

<div class="page-header">
    <div class="log left">python全栈</div>
    <div class="user right">
        <a class="a">
            <img src="2.jpg" alt="用户一">
        </a>
        <div class="more">
            <a>我的信息</a>
            <a>注销</a>
        </div>
    </div>
</div>

<div class="page-body">
    <div class="body-menu"></div>
    <div class="body-content">
        <div>sfa121</div><div>sfa12</div><div>sfa12</div><div>sfa121</div><div>sfa12</div><div>sfa12</div>
        <div>sfa121</div><div>sfa12</div><div>sfa12</div><div>sfa121</div><div>sfa12</div><div>sfa12</div>
        <div>sfa121</div><div>sfa12</div><div>sfa12</div><div>sfa121</div><div>sfa12</div><div>sfa12</div>
        <div>sfa121</div><div>sfa12</div><div>sfa12</div><div>sfa121</div><div>sfa12</div><div>sfa12</div>
        <div>sfa121</div><div>sfa12</div><div>sfa12</div><div>sfa121</div><div>sfa12</div><div>sfa12</div>
        <div>sfa121</div><div>sfa12</div><div>sfa12</div><div>sfa121</div><div>sfa12</div><div>sfa12</div>
        <div>sfa121</div><div>sfa12</div><div>sfa12</div><div>sfa121</div><div>sfa12</div><div>sfa12</div>

    </div>
</div>

</body>
</html>
标签：脚本,sfa121sfa12sfa12sfa121sfa12sfa12,hover,width,48px,height,header,page
来源： https://www.cnblogs.com/zxy01/p/13658132.html