CSS 頁面佈局、後臺管理示例

時間 2019-11-06

標籤 css 頁面佈局後臺管理示例欄目 CSS 简体版

原文原文鏈接

CSS 頁面佈局、後臺管理示例css

頁面佈局html

　　一、頭部菜單ide

　　二、中間內容/中間左側菜單函數

　　三、底部內容佈局

<div class='pg-header'>
    <div style='width:980px;margin:0 auto;'>
        內容自動居中
    </div>
</div>
<div class='pg-content'></div>
<div class='pg-footer'></div>

網站圖片推薦：fontawesome.io
下載：font-awesome-4.7.0 推薦：使用壓縮過的min
導入：放入當前路徑網站

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

後臺管理示例spa

後臺管理2：加入overflow: auto;後左側菜單不動
後臺管理2：未加入overflow: auto;菜單跟隨右側延伸
後臺管理2：二者切換更方便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: #2459a2;
            color: white;
        }

        /*左邊菜單內的.menu*/
        .pg-content .menu {
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: cornflowerblue;
        }

        /*y右邊菜單內的.content*/
        .pg-content .content {
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: powderblue;
            /*加入滾動條*/
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu left">菜單</div>
    <div class="content left">
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

後臺管理佈局1 ：左側菜單跟隨滾動條

<!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: #2459a2;
            color: white;
        }

        /*左邊菜單內的.menu*/
        .pg-content .menu {
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: cornflowerblue;
        }

        /*y右邊菜單內的.content*/
        .pg-content .content {
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            /*加入滾動條*/
            /*      */
        }
    </style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu left">菜單</div>
    <div class="content left">
        <div style=" background-color: powderblue;">
            <p style=" margin: 0;">內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
        </div>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

後臺管理佈局2：左側以及上部不動 **經常使用**

後臺管理完整版htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>

        /*去頁面間距*/
        body{
            margin: 0;
        }

        /*標籤左側飄起*/
        .left{
            float: left;
        }

        /*標籤右側飄起*/
        .right{
            float: right;
        }

        /*頭部菜單區域*/
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
            /*設置文字上下居中*/
            line-height: 48px;
        }

        /*設置網站log區域*/
        .pg-header .log{
            /*log區域設置菜單大小*/
            width: 200px;
            background-color: darkblue;
            /*設置文字左右居中*/
            text-align: center;
        }

        /* 其餘圖標區域邊距設置*/
        .pg-header .icons{
            padding: 0 20px;
        }

        /*消息提示個數文字背景色*/
        .pg-header .zbjj {
            border-radius: 50%;
            display: inline-block;
            padding: 10px 7px;
            line-height: 1px;
            background-color: red;
            font-size: 12px;
        }

        .pg-header .icons:hover{
            background-color: darkblue;
        }

        /*添加登錄管理區域*/
        .pg-header .user{
            /*user區域設置菜單大小*/
            margin-right: 60px;
            padding: 0 20px;
            color: white;
            /*飄起後防止出去*/
            height: 48px;
            /*user文字左右居中*/
            /*text-align: center;*/
        }

        /*鼠標點擊後背景顏色更改*/
        .pg-header .user:hover{
            background-color:mediumslateblue ;
        }

        /*用戶頭像圖片*/
        .pg-header .user .a img{
            height: 40px;
            width: 40px;
            margin: 4px;
            /*圖片變爲圓形*/
            border-radius: 50%;
        }

        /*用戶選擇框*/
        .pg-header .user .b{
            position: absolute;
            top: 48px;
            right: -1px;
            width: 160px;
            background-color: white;
            color: black;
            /*解決分層*/
            z-index:20;
            /*不適用當前函數*/
            display: none;
        }

        /*鼠標指向用戶管理區域觸發用戶選擇框*/
        .pg-header .user:hover .b{
            display: block;
        }

        /*用戶選擇框解決分行*/
        .pg-header .user .b a{
            display: block;
        }

        /*左邊菜單內的.menu*/
        .pg-content .menu{
            position: absolute;
            top:48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: cornflowerblue;
        }

        /*y右邊菜單內的.content*/
        .pg-content .content{
            position: absolute;
            top:48px;
            right: 0;
            bottom: 0;
            left: 200px;
            overflow: auto;
            z-index: 9;
        }

    </style>
</head>
<body>

    <!--上部區域-->
    <div class="pg-header">
        <!--log-->
        <div class="log left">
            Kevin.Xiang
        </div>

        <div class="user right" style="position: relative">
            <!--點擊頭像跳轉-->
            <a class="a" href="#">
                <!--添加圖片-->
                <img src="xsk.jpg">
            </a>
            <div class="b">
                <a>個人資料</a>
                <a>註銷</a>
            </div>
        </div>

        <!--消息-->
        <div class="icons right">
            <i class="fa fa-comment-o" aria-hidden="true"></i>
            <!--消息個數-->
            <span class="zbjj">5</span>
        </div>

        <!--提示-->
        <div class="icons right">
            <i class="fa fa-bell-o" aria-hidden="true" ></i>
        </div>

    </div>

    <!--中間區域-->
    <div class="pg-content">
        <div class="menu left">菜單</div>
        <div class="content left">
            <div style=" background-color: powderblue;">
                <p style=" margin: 0;">內容</p><p>內容</p><p>內容</p>
                <p>內容</p><p>內容</p><p>內容</p>
                <p>內容</p><p>內容</p><p>內容</p>
                <p>內容</p><p>內容</p><p>內容</p>
                <p>內容</p><p>內容</p><p>內容</p>
                <p>內容</p><p>內容</p><p>內容</p>
                <p>內容</p><p>內容</p><p>內容</p>
                <p>內容</p><p>內容</p><p>內容</p>
            </div>
        </div>
    </div>

    <!--底層區域-->
    <div class="pg-footer"></div>

</body>
</html>