52-55

时间 2020-02-02

原文原文链接

后台管理页面布局

fixed

<!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: deepskyblue;
            color: white;
        }

        .pg-content .menu{
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: aquamarine;
        }
        .pg-content .content{
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: yellow;
            overflow: auto;
        }

    </style>

</head>
<body>

    <div class="pg-header"></div>

    <div class="pg-content">
        <div class="menu left">aaa</div>
        <div class="content right">
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        </div>
    </div>

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

</body>
</html>

上图：最上边为头部；左边为菜单；右边为内容，当内容较多时，须要使用滚动条(overflow:auto)查看更多内容；使用滚动条时菜单和内容区域也会悬浮在固定位置不变，由于position:fixed一直悬浮在指定位置。html

absolute

<!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: deepskyblue;
            color: white;
        }

        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: aquamarine;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: yellow;

        }

    </style>

</head>
<body>

<div class="pg-header"></div>

<div class="pg-content">
    <div class="menu left">aaa</div>
    <div class="content right">
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
    </div>
</div>

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

</body>
</html>

代码：这里使用的absolute替换fixed； absolute只是第一次会悬浮在指定的位置，当有使用滚动条时就不会再悬浮在指定位置了。浏览器

上图：第一次悬浮在指定的位置ide

上图：当使用滚动条后，能够看到全部标签都向上滚动了。布局

上图：咱们在content类标签加了一个overflow:auto；当content标签中内容较多时，自己就会出现一个滚动条，使用滚动条时也只是content标签滚动，其余的标签不会随其滚动。相比fixed，使用absolute这个方法来固定标签位置更多一些。字体

<!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: deepskyblue;
            color: white;
            line-height: 48px;
        }

        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: aquamarine;
        }

        .pg-header .logo{
            width: 200px;
            background-color: blue;
            text-align: center;
        }

        .pg-header .user{
            width: 160px;
            background-color: wheat;
        }

        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: yellow;
            overflow: auto;
        }

    </style>

</head>
<body>

<div class="pg-header">
    <div class="logo">
        Logo
    </div>
    <div class="user right">
        张三
    </div>
</div>

<div class="pg-content">
    <div class="menu left">aaa</div>
    <div class="content right">
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
    </div>
</div>

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

</body>
</html>

代码：咱们想加一个用户信息，在页面的右边设计

上3图：
咱们在图中右边并无发现张三，这是class="logo"这个标签当前已经占据了整行。
第3张图能够看到，user这个标签被挤到下面去了code

<!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: deepskyblue;
            color: white;
            line-height: 48px;
        }

        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: aquamarine;
        }

        .pg-header .logo{
            width: 200px;
            background-color: blue;
            text-align: center;
        }

        .pg-header .user{
            width: 160px;
            background-color: wheat;
        }

        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: yellow;
            overflow: auto;
        }

    </style>

</head>
<body>

<div class="pg-header">
    <div class="logo left">
        Logo
    </div>
    <div class="user right">
        张三
    </div>
</div>

<div class="pg-content">
    <div class="menu left">aaa</div>
    <div class="content right">
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
    </div>
</div>

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

</body>
</html>

代码：logo标签让其悬浮在左侧，这样user标签就上来了，且悬浮在右侧。htm

<!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: deepskyblue;
            color: white;
            line-height: 48px;
        }

        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: aquamarine;
        }

        .pg-header .logo{
            width: 200px;
            background-color: blue;
            text-align: center;
        }

        .pg-header .user{
            width: 160px;
            background-color: wheat;
        }

        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: yellow;
            overflow: auto;
        }

    </style>

</head>
<body>

<div class="pg-header">
    <div class="logo left">
        Logo
    </div>
    <div class="user right">
        <a>
            <img src="1.jpg" style="height: 40px; width: 50px;">
        </a>
    </div>
</div>

<div class="pg-content">
    <div class="menu left">aaa</div>
    <div class="content right">
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
    </div>
</div>

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

</body>
</html>

代码：在右边设置一个头像替代用户名图片

<!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: deepskyblue;
            color: white;
            line-height: 48px;
        }

        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: aquamarine;
        }

        .pg-header .logo{
            width: 200px;
            background-color: blue;
            text-align: center;
        }

        .pg-header .user{
            width: 160px;
            background-color: wheat;
        }

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

        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: yellow;
            overflow: auto;
        }

    </style>

</head>
<body>

<div class="pg-header">
    <div class="logo left">
        Logo
    </div>
    <div class="user right">
        <a class="a" href="#">
            <img src="1.jpg">
        </a>
    </div>
</div>

<div class="pg-content">
    <div class="menu left">aaa</div>
    <div class="content right">
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
    </div>
</div>

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

</body>
</html>

代码：.pg-header .user .a img 设计
margin-top: 4px 使图片垂直居中;
border-radius: 50%; 使图片变小，50%能够让突变变成圆形。ip

<div class="pg-header">
    <div class="logo left">
        Logo
    </div>
    <div class="user right" style="position: relative">
        <a class="a" href="#">
            <img src="1.jpg">
        </a>
        <div style="position: absolute; top: 0; right: 0; background-color: red">
            testtesttesttesttesttest
        </div>
    </div>
</div>

代码：
增长div标签，让其悬浮在user标签的右边

上图：红色背景部分已经悬浮在了右边，下面咱们在浏览器中将其往下调整

上图：在浏览器中直接将top这个属性进行调整，能够看到已经往下移动了，可是却被隐藏到黄颜色背景下面了。这是由于两个标签都是position: absolute;

<!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: deepskyblue;
            color: white;
            line-height: 48px;
        }

        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: aquamarine;
        }

        .pg-header .logo{
            width: 200px;
            background-color: blue;
            text-align: center;
        }

        .pg-header .user{
            width: 160px;
            background-color: wheat;
        }

        .pg-header .user .a img{
            margin-top: 4px;
            height: 40px;
            width: 40px;
            border-radius: 50%;
        }
        .pg-header .user:hover{
            background-color: chocolate;
        }
        .pg-header .user .b{
            position: absolute;
            top: 0;
            right: 0;
            background-color: red;
            z-index: 20;

        }

        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: yellow;
            overflow: auto;
            z-index: 9;
        }

    </style>

</head>
<body>

<div class="pg-header">
    <div class="logo left">
        Logo
    </div>
    <div class="user right" style="position: relative">
        <a class="a" href="#">
            <img src="1.jpg">
        </a>
        <div class="b">
            testtesttesttesttesttest
        </div>
    </div>
</div>

<div class="pg-content">
    <div class="menu left">aaa</div>
    <div class="content right">
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
    </div>
</div>

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

</body>
</html>

代码：
.pg-header .user .b 设计z-index为20
.pg-content .content 设计z-index为9

上图：
根据z-index决定谁在上层
这里咱们还将红色背景标签（模拟下拉菜单）移动到头像正下方，由于是在浏览器中调整的，因此须要将调整后设计的属性写入代码中。

.pg-header .user .b{
    position: absolute;
    top: 48px;
    right: 49px;
    background-color: red;
    z-index: 20;

}

代码：将在浏览器中调整好的设计，写入代码中。

.pg-header .user .b a{
            display: block;
        }

<div class="pg-header">
    <div class="logo left">
        Logo
    </div>
    <div class="user right" style="position: relative">
        <a class="a" href="#">
            <img src="1.jpg">
        </a>
        <div class="b">
            <a>个人资料</a>
            <a>注销</a>
        </div>
    </div>
</div>

代码：修改内容，并将新增的a标签设计为block标签

上图：红色背景产生变化了，这是由于当前的宽度是由于字体的长短给撑起来的，随着字体变更而变更。

.pg-header .user .b{
            position: absolute;
            top: 48px;
            right: 49px;
            background-color: red;
            z-index: 20;
           width: 160px;
        }

上图：调整宽度为160px

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。