前端武器庫系列之html后台管理頁面布局

本文轉載自查看原文 2017-07-12 15:28 1896 前端逼死強迫症系列/ python成仙之路— —Little_demo

設計網頁，讓網頁好看：網上找模板

搜 HTML模板
BootStrap

一、頁面布局之主站頁面

主站布局一般不占滿頁面，分為菜單欄、主頁面、底部上中下三部分。偽代碼如下：

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

二、頁面布局之后台布局

后台頁面一般分為上面頂部菜單、左側操作欄、中右為內容三部分。有的后台可能會有個底部欄。

首先，左側操作欄和中間內容欄怎么分，按照百分比的話，為了防止頁面拖拽導致布局變化，可以設置最小寬度：

width: 20%;
min-width: 200px;    /*當寬度小於200像素時生效*/

其次，左側操作欄一般都是直接到底的，高度怎么設置呢？

后台管理布局：position:

fixed – 永遠固定在窗口的某個位置
relative – 單獨無意義
absolute – 第一次定位，可以在指定位置，滾輪滾動時，不在了。。。。

1.后台布局之：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: #2459a2;
            color: white;
        }
        .pg-content .menu{
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: purple;
            overflow: auto;   /***************當內容多時，出現滾動條**************/
          /*不加overflow的話，內容多就不可見了*/
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu left">a</div>
        <div class="content left">
            <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

2.后台布局之：absolute實現

通過改一個屬性，就可以實現一下兩種布局：

a. 左側菜單跟隨滾動條
b. 左側以及上部不動

<!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;
        }
        .pg-content .menu{
            position: absolute;
            top:48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            overflow: auto;   /*注釋不注釋，兩種布局效果*/
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu left">a</div>
        <div class="content left">
            <!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回頂部</div>-->
            <!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回頂部</div>-->
            <div style="background-color: purple;">
                <p style="margin: 0;">a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
            </div>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

三、后台頁面布局之菜單欄設計

后台管理頁面一般頂部菜單欄，左側有個logo，右側有登錄用戶，以及報警信息，會話信息等。

用戶頭像設計為圓的

border-radius: 50%;       /*設計頭像圖片是圓的*/

鼠標移動過去之后，多個內容顯示出不同的樣式

<head>
    <style>
        .item{
            background-color: #dddddd;
        }
        .item:hover{
            color: red;
        }
        .item:hover .b{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="a">123</div>
        <div class="b">567</div>
    </div>
</body>

引入第三方css插件，好多圖標就可以直接用了。

下載圖標插件 —> The Icons 地址

總體實現

<!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"/>
    <!--導入第三方圖片插件，目錄里兩個css，一個壓縮版的一個沒有壓縮（壓縮版是一行）-->
    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
            line-height: 48px;
        }
        .pg-header .logo{
            width: 200px;
            background-color: #204982;
            text-align: center;
        }
        .pg-header .icons{
            padding: 0 20px;
        }
        .pg-header .icons:hover{
            background-color: #204982;
        }
        .pg-header .user{
            margin-right: 60px;
            padding: 0 20px;
            color: white;
            height: 48px;
            position: relative;
        }
        .pg-header .user:hover{
            background-color: #204982;
        }
        .pg-header .user .a img{
            height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;
        }
        .pg-header .user .b{
            z-index: 20;
            position: absolute;
            /*相對於用戶div定位*/
            top: 48px;
            right: 0;
            background-color: white;
            color: black;
            width: 160px;
            display: none;
            font-size: 14px;
            line-height: 30px;
        }
        .pg-header .user .b a{
            padding: 5px;
            color: black;
            text-decoration: none;
        }
        .pg-header .user .b a:hover{
            background-color: #dddddd;
        }
        .pg-header .user:hover .b{
            display: block;
        }
        .pg-header .user .b a{
            display: block;
        }
        .pg-content .menu{
            position: absolute;
            top:48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }

        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            overflow: auto;
            z-index: 9;
        }
        /* 設置消息樣式，數字外邊加個圓圈 */
        .info {
            border-radius: 50%;
            line-height: 1px;
            background-color: red;
            padding: 10px 7px;
            font-size: 12px;
            display: inline-block;
        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="logo left">
            順勢而為
        </div>

        <div class="user right">
            <a class="a" href="#">
                <img src="22.jpg">
            </a>
            <!--鼠標放在頭像上的下拉框-->
            <div class="b">
                <a href="#">我的資料</a>
                <a href="#">注銷</a>
            </div>
        </div>

        <div class="icons right">
            <i class="fa fa-commenting-o" aria-hidden="true"></i>
            <!--從圖標官網找圖標引用語句復制下來 -->
            <span class="info">5 </span>  <!--比如5條消息-->
        </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">a</div>
        <div class="content left">
            <div style="background-color: purple">
                <p style="margin: 0;">a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
            </div>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

View Code

免責聲明！

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

猜您在找 后台管理頁面布局、web頁面布局 Html 作業：注冊、登錄、后台管理頁面 html頁面布局之table布局：關於html頁面布局后台管理前端經典后台管理界面布局 react + react-router + redux + ant-Desgin 搭建react管理后台 -- 頁面布局（五）前端注冊頁面布局前端大屏頁面布局經驗【tornado】系列項目（二）基於領域驅動模型的區域后台管理+前端easyui實現