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

每日一句

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