WEB前端-HTML-CSS-後臺管理頁面佈局小例

阿新 • • 發佈：2019-01-23

作為一個後臺管理頁面，不必太過複雜，一般只需要三部分：
1、上層標籤塊；
2、左側選單塊；
3、中部內容顯示塊；

今天簡要給大家分享一個佈局中的一個小case；
需求：要求上層標籤塊、左側選單快固定不動，滾動條只對中部顯示塊作用；

其實很簡單，就是利用absolute的底部定位 ”bottom：0“配合overflow：auto來實現的。
程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title 
>
    <style>
        body{
            margin:0 auto;
            background-color:greenyellow;
        }
        .pa-header{
            height:48px;
            background-color:blue;

        }
        .pa_body .body-menu{
            position:absolute;
            top:48px;
            left 
:0;
            bottom:0;
            width:200px;
            background-color:red;
        }
        .pa_body .body-content{
            position:absolute;
            top:48px;
            left:210px;
            right:0;
            background-color:green;
            bottom:0;
            /* “bottom:0 與 overflow” 結合使用的效果：當內容超出顯示器時，自動新增本區域的滾動條，其他區域保持不變*/ 

            overflow:auto;
            /*除了上面的方式，還有一種是不定義bottom，也不用overflow，這樣內容是多少，中間內容區的行高就是多少，自適應，但是選單和標題欄就會隨著滾輪而動*/
        }
    </style>
</head>
<body>
    <div class="pa-header">top-target</div>
    <div class="pa_body">
        <div class="body-menu"></div>
        <div class="body-content">
            1111111111111111111111111111111111<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
            <div style="border:2px dashed wheat;height:60px;"></div>
            2222222222222222222222222222222222<br/>
        </div>
    </div>
</body>
</html>

WEB前端-HTML-CSS-後臺管理頁面佈局小例

作為一個後臺管理頁面，不必太過複雜，一般只需要三部分： 1、上層標籤塊； 2、左側選單塊； 3、中部內容顯示塊；今天簡要給大家分享一個佈局中的一個小case；需求：要求上層標籤塊、左側選單

HTML 後臺管理頁面佈局

設計網頁，讓網頁好看：網上找模板搜 HTML模板 BootStrap 一、內容回顧： HTML 一大堆的標籤：塊級、行內 CSS position background text-align margin padding font-

後臺管理頁面佈局後臺管理頁面佈局

https://www.cnblogs.com/bigberg/p/9284709.html 後臺管理頁面佈局一、整體分佈　　簡單的一個頁面佈局，頭部、左側選單欄，右側內容，頭部和選單欄固定位置，內容部分如果很長就會出現滾動條

簡易的後臺管理頁面佈局（二）

這裡做了一個簡易的模板，用到了一個獲取圖示的小工具，可以到這個網站下載：http://fontawesome.io/ 色彩搭配也許不好看，我不是專門搞這個的。由於時間原因沒有寫入JS，可以自己加入。 <!DOCTYPE html> <html lang

Web前端 HTML CSS 特殊字元表

⇠ 箭頭類符號UNICODE符號UNICODEHTMLJSCSSHTMLJSCSS⇠&#8672u21E021E0⇢&#8674u21E221E2⇡&#8673u21E121E

[Web 前端] 006 css 三種頁面引入的方法

div 引入 sheet 同時 gree web gre color class 1. 外鏈式用法 step 1: 在 html 文檔的 head 頭部分寫入下方這句話 <link rel="stylesheet" href="./

web前端學習（三）css學習筆記部分（5）-- CSS動畫--頁面特效、HTML與CSS3簡單頁面效果實例

key cti 樣式描述 ans 轉換方法動畫效果 ansi order CSS動畫--頁面特效部分內容目前僅僅觀看了解內容,記錄簡單筆記，之後工作了進行內容的補充 7. CSS動畫--頁面特效 7.1 2D、3D轉換　　7.1.1 通過CSS3轉換，我們能夠對

漂亮精簡版的HTML後臺管理頁面

最近自己需要一套後臺管理的模版，然後去網上查詢，模版的確很多，但是適合我的並不多。我需要的模版是不會很大，我能夠控制程式碼，樣式不要太古樸，最好有點CSS3的效果。最後終於找到一張主頁，然後再根據這個主頁來編輯其他的後臺部分。第一眼看到這個樣式，就非常滿意。現在只做了四張頁面，登入、首頁、選單管理和選單

web前端之CSS 佈局經典問題整理

CSS 定位問題主要就是經典的絕對定位，相對定位問題。 10個文件學佈局：通過十個例子講解佈局，主要涉及相對佈局，絕對佈局，浮動。 HTML和CSS高階指南之二——定位詳解（譯文）：介紹浮動的使用，詳細介紹定位的技巧，包括如何準確的給元素在 X 軸、Y 軸和 Z 軸定位

HTML-後臺管理頁面的製作(框架標籤)

頁面框架 index.html <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org

Web前端-HTML、CSS、JS

概述　　HTML是英文Hyper Text Mark-up Language(超文字標記語言)的縮寫，它是一種製作全球資訊網頁面標準語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。瀏覽器負責將標籤翻譯成使用者“看得懂”的格式，呈現給使用者

後臺管理頁面基本佈局方式

經典頁面佈局簡易後臺管理頁面佈局 1 左邊選單欄固定 2 header固定高度(寬度自適應) 3 主體統計列表（寬度自適應）程式碼如下 html <div class="main"> <header cl

HTML高階標籤（2）————視窗分幀（2）————後臺管理頁面

使用frameset進行視窗分幀，構建簡易的後臺頁面。這篇部落格就作為一個簡易後臺管理頁面的實戰演練。 1 首先，需要一個頁面，使用<frameset>按比例劃分為適合的三個區域：頭部，選單，主體。 <frameset>不能放在<body&g

Web前端-html頁面-01（錨點、表單、個人簡歷）

Web前端學習中-01 先來幾張圖鎮樓! 1.錨點連結 2.單選框圖片背景更換 3.巢狀表格 4.HTML版個人簡歷 5.表單輸入框 6.郵箱登錄檔單程式碼

python之前端HTML/CSS基礎知識學習筆記

引號編寫 css基礎通用浮動我們公司地址將不多行 1. 文件結構： HTML文件的固定結構： <html> <head>...</head> <body>...&l

Web前端學習——CSS

sheet adding row edi 優先級 blue 層級空格 tex 一、CSS簡介CSS全稱cascading style sheeding，層疊樣式列表。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。二、CSS組成1、選擇器

web前端之css

css web一、介紹CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。二、語法每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之後用分號結束三、CSS的幾種引入方式

5. 添加後臺管理頁面

.com 介紹 lis res getparent -a awesome sele containe 接著上篇繼續，博客網站少不了後臺管理頁面，在後臺可以添加文章以及維護基礎數據，因此本文主要就介紹怎樣添加視圖頁面、怎樣使用視圖模型、綁定靜態資源以及ThymeLeaf模板引

web自動化測試---css方式定位頁面元素

class 進行 lec web 輸入框 python 百度 inpu 直接　　css方式定位的方法也有很多，相較於xpath更靈活一點，下面就介紹下使用方法（以百度輸入框為例） 1、通過tag來定位，可以寫成如下： driver.find_element_by_css

後臺管理頁面布局

doctype set html 用戶 osi 過多 -a 執行 oat 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

WEB前端-HTML-CSS-後臺管理頁面佈局小例

相關推薦