后台管理頁面布局

本文轉載自查看原文 2018-07-10 10:24 9634 web開發基礎

一、整體分布

　　簡單的一個頁面布局，頭部、左側菜單欄，右側內容，頭部和菜單欄固定位置，內容部分如果很長就會出現滾動條

　　兩種方法能實現，其實兩種差別只有一個屬性不一樣。

　　1.1 使用position：fixed

　　1.先定義三個div標簽

<body>
    <div class="pg_header"></div>
    <div class="pg_content"></div>
    <div class="pg_footer"></div>
</body>

　　2.設定頭部樣式，高48px，背景色藍色　　

    <style>
        body{
            margin: 0 auto;
        }
        .pg_header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }

    </style>

　　頂部出現一個藍色長條

　　3.在pg_content里划分出兩個區域，一個左側菜單欄，一個右側內容區

　　一般會要求左側菜單欄能固定位置，一直顯示在左側，高度就是整個瀏覽器高度　　

# 先增加兩個div標簽

 <div class="pg_content">
    <div class="menu"></div>
    <div class="content"></div>
</div>


# 為menu設置樣式

.pg_content .menu{
            position: fixed;
            top: 50px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }

　　左側增加一個灰色長條：

　　4.同樣我們想要右側的內容區也能像菜單欄一樣，固定位置、並占據整個右側位置。並且在內容過長時，會出現滾動條（overflow實現）　

.pg_content .content{
            position: fixed;
            top: 50px;
            right: 0;
            bottom: 0;
            left: 202px;
            background-color: darkturquoise;
            overflow: auto;
        }

　　當內容很長時，會出現滾動條：

　　1.2 使用position：absolute

　　第二種方法相比第一種方法，只需將position:fixed改為position:absolute

　　再為content增加一個最小寬度的屬性，當瀏覽器縮小時，小於一定寬度是，就會出現橫滾動條，可以防止頁面內容布局錯亂，但是這樣header也需要修改一下，加了最小寬度以后，header在有橫滾動條時寬度無法滿屏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page_layout2</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg_header{
            position: fixed;
            top: 0;
            width: 100%;
            height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .pg_content .menu{
            position: absolute;
            top: 50px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg_content .content{
            position: absolute;
            top: 50px;
            right: 0;
            bottom: 0;
            left: 202px;
            background-color: darkturquoise;
            overflow: auto;
            min-width: 980px;
        }
    </style>
</head>
<body>
    <div class="pg_header"></div>
    <div class="pg_content">
        <div class="menu"></div>
        <div class="content">
 
        </div>
    </div>
    <div class="pg_footer"></div>
</body>
</html>

　　整體效果和上一個差不多：　

二、頭部設計

　　2.1 頭部左側增加logo

　　（1）首先定義兩個經常用到的float css樣式　

        .left{
            float: left;
        }
        .right{
            float: right;
        }

　　（2）在header下定義一個div　　

# 定義div
<div class="pg_header">
        <div class="logo left">
            <a href="https://www.google.com" target="_blank">
                <img src="images/logo.png">
            </a>
        </div>
</div>


# css樣式
.pg_header .logo{
            height: 48px;
            width: 200px;
            text-align: center;
            color: white;
        }
.pg_header .logo a img{
            height: 48px;
            width: 50px;
        }

　　增加了logo：

　　2.2 header右側增加登入信息

　　（1）頭像

　　右側個人信息其實只要一個頭像，鼠標移到頭像上時，會有信息框出現　

# 在header中定義一個div標簽
<div class="pg_header">
        <div class="person_info right">
            <img src="images/head.jpg">
        </div>
</div>

# 添加person_info的css樣式

.pg_header .person_info{
            position: relative;
            height: 48px;
            width: 160px;
        }
.pg_header .person_info img{
            border: 0;
            height: 48px;
            width: 50px;
            /*使用border-radius可以定義邊框的圓角程度*/
            border-radius: 50%;
        }

　　出現頭像：　

　　（2）增加一個div,用於顯示信息和操作，其位置相對於peron_info固定　　

# 在person_info下增加一個div
<div class="info">
                <a>我的信息</a>
                <a>注銷</a>
                <a>修改密碼</a>
                <a>修改頭像</a>
</div>

# 為其設置css樣式

.pg_header .person_info .info{
            position: absolute;
            width: 150px;
            background-color: cornflowerblue;
            top: 50px;
            z-index: 20;
        }
.pg_header .person_info .info a{
            display: block;
            color: white;
        }

　　這樣完成后還是不行，因為看不到這個標簽，我們需要對pg_header也增加一個z-index屬性，設置值為10　　

　　（3）默認情況下是看不到info這個標簽的，所以還需要對info的css樣式增加display:none屬性　

.pg_header .person_info .info{
            position: absolute;
            width: 150px;
            background-color: cornflowerblue;
            top: 50px;
            z-index: 20;
            display: none;
        }

　　（4）顯示info標簽

　　增加了display：none后，信息標簽默認看不到，現在的需求是鼠標移到person_info這個div標簽時，info標簽顯示　　

# 增加一個css樣式就能實現

.pg_header .person_info:hover .info{
            display: block;
        }


# hover就是為元素增加樣式的，上面的意思就是當鼠標移到person_info這個標簽時，就將info標簽的display設置為block

　　鼠標移到頭像出就顯示信息：　

　　2.3 插入圖標

　　頭部信息中通常還有郵件和提醒服務存在，也就是插入一下圖標，登入后提示一下信息需要處理。

　　需要的圖標可以在https://fontawesome.com中去下載，並放到自己的項目中。

　　（1）尋找圖標

　　在下載圖標的網站上尋找需要的圖標

　　點擊相應的圖標，拷貝

　　（2）增加郵件和鈴鐺的圖標　

# 引用css樣式
<link rel="stylesheet" href="fontawesome-free-5.1.0-web/css/all.css">

# 在pg_header下增加兩個div標簽（person_info div之后）

        <div class="icons right">
            <i class="far fa-bell"></i>
        </div>
        <div class="icons right">
            <i class="far fa-envelope"></i>
        </div>

# 增加css樣式
        .pg_header .icons{
            line-height: 48px;
            padding: 0 20px 0 5px;
        }
        .pg_header .icons:hover{
            background-color: cornflowerblue;
        }

　　效果：

　　（3）增加消息數量顯示

　　如果有3封郵件，就在郵件旁邊顯示數字3　

# 郵件圖標的div下增加一個span標簽
<div class="icons right">
       <i class="far fa-envelope"></i>
       <span>3</span>
</div>

# 為span 添加css樣式

.pg_header .icons span{
            padding: 1px 5px;
            line-height: 1px;
            border-radius: 50%;
            background-color: red;
            font-size: 12px;
        }

　　效果：

　　完整html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page_layout2</title>
    <link rel="stylesheet" href="fontawesome-free-5.1.0-web/css/all.css">
    <style>
        body{
            margin: 0 auto;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }

        .pg_header{
            position: fixed;
            top: 0;
            width: 100%;
            height: 48px;
            background-color: #2459a2;
            color: white;
            z-index: 10;
        }
        .pg_header .logo{
            height: 48px;
            width: 200px;
            text-align: center;
            color: white;
        }
        .pg_header .logo a img{
            height: 48px;
            width: 50px;
        }
        .pg_header .person_info{
            position: relative;
            height: 48px;
            width: 160px;
            /*text-align: center;*/
        }
        .pg_header .person_info img{
            border: 0;
            height: 48px;
            width: 50px;
            /*使用border-radius可以定義邊框的圓角程度*/
            border-radius: 50%;
        }
        .pg_header .person_info .info{
            position: absolute;
            width: 150px;
            background-color: cornflowerblue;
            top: 50px;
            z-index: 20;
            display: none;
        }
        .pg_header .person_info .info a{
            display: block;
            color: white;
        }
        .pg_header .person_info:hover .info{
            display: block;
        }
        .pg_header .icons{
            line-height: 48px;
            padding: 0 20px 0 5px;
        }
        .pg_header .icons:hover{
            background-color: cornflowerblue;
        }
        .pg_header .icons span{
            padding: 1px 5px;
            line-height: 1px;
            border-radius: 50%;
            background-color: red;
            font-size: 12px;
        }
        .pg_content .menu{
            position: absolute;
            top: 50px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg_content .content{
            position: absolute;
            top: 50px;
            right: 0;
            bottom: 0;
            left: 202px;
            background-color: darkturquoise;
            overflow: auto;
            min-width: 980px;
            z-index: 8;
        }
    </style>
</head>
<body>
    <div class="pg_header">
        <div class="logo left">
            <a href="https://www.google.com" target="_blank">
                <img src="images/logo.png">
            </a>
        </div>
        <div class="person_info right">
            <img src="images/head.jpg">
            <div class="info">
                <a>我的信息</a>
                <a>注銷</a>
                <a>修改密碼</a>
                <a>修改頭像</a>
            </div>
        </div>
        <div class="icons right">
            <i class="far fa-bell"></i>
        </div>
        <div class="icons right">
            <i class="far fa-envelope"></i>
            <span>3</span>
        </div>
    </div>
    <div class="pg_content">
        <div class="menu"></div>
        <div class="content">

        </div>
    </div>
    <div class="pg_footer"></div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 后台管理頁面布局、web頁面布局 HTML后台管理頁面布局 CSS 頁面布局、后台管理示例后台管理頁面基礎布局HTML+CSS 前端武器庫系列之html后台管理頁面布局 ExtJS布局：制作后台管理布局 Element后台管理的整體布局經典后台管理界面布局 Vue項目練習--電商后台管理系統的功能---主頁的頁面布局 react + react-router + redux + ant-Desgin 搭建react管理后台 -- 頁面布局（五）