52-55

时间：2019-10-25 23:22:59 阅读：76 评论：0 收藏：0 [点我收藏+]

后台管理页面布局

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一直悬浮在指定位置。

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只是第一次会悬浮在指定的位置，当有使用滚动条时就不会再悬浮在指定位置了。

技术分享图片

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

技术分享图片

上图：当使用滚动条后，可以看到所有标签都向上滚动了。

技术分享图片

上图：我们在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这个标签被挤到下面去了

<!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标签就上来了，且悬浮在右侧。

技术分享图片

<!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%可以让突变变成圆形。

技术分享图片

<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

52-55

原文：https://blog.51cto.com/daimalaobing/2445607

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)