後臺管理頁面佈局

時間  2019-12-02
標籤 後臺 管理 頁面 佈局 简体版
原文   原文鏈接

1、總體分佈

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

　　兩種方法能實現，其實兩種差異只有一個屬性不同。html

　　1.1 使用position：fixedweb

　　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裏劃分出兩個區域，一個左側菜單欄，一個右側內容區google

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

# 先增長兩個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實現）　htm

.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、頭部設計

　　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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程