後台管理頁面布局

2022-07-04 00:12:13 字數 3213 閱讀 2257

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

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

1.1 使用position:fixed

1.先定義三個div標籤

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

頂部出現乙個藍色長條

3.在pg_content裡劃分出兩個區域,乙個左側選單欄,乙個右側內容區

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

# 先增加兩個div標籤

# 為menu設定樣式

.pg_content .menu

左側增加乙個灰色長條:

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

.pg_content .content
當內容很長時,會出現滾動條:

1.2 使用position:absolute

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

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

整體效果和上乙個差不多:

2.1 頭部左側增加logo

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

.left

.right

(2)在header下定義乙個div  

# 定義div

# css樣式

.pg_header .logo

.pg_header .logo a img

增加了logo:

2.2 header右側增加登入資訊

(1)頭像

右側個人資訊其實只要乙個頭像,滑鼠移到頭像上時,會有資訊框出現 

# 在header中定義乙個div標籤

# 新增person_info的css樣式

.pg_header .person_info

.pg_header .person_info img

出現頭像: 

(2)增加乙個div,用於顯示資訊和操作,其位置相對於peron_info固定  

# 在person_info下增加乙個div

我的資訊

登出修改密碼

修改頭像

# 為其設定css樣式

.pg_header .person_info .info

.pg_header .person_info .info a

這樣完成後還是不行,因為看不到這個標籤,我們需要對pg_header也增加乙個z-index屬性,設定值為10  

(3)預設情況下是看不到info這個標籤的,所以還需要對info的css樣式增加display:none屬性 

.pg_header .person_info .info
(4)顯示info標籤

增加了display:none後,資訊標籤預設看不到,現在的需求是滑鼠移到person_info這個div標籤時,info標籤顯示  

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

.pg_header .person_info:hover .info

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

滑鼠移到頭像出就顯示資訊: 

2.3 插入圖示

頭部資訊中通常還有郵件和提醒服務存在,也就是插入一下圖示,登入後提示一下資訊需要處理。

(1)尋找圖示

點選相應的圖示,拷貝

(2)增加郵件和鈴鐺的圖示 

# 引用css樣式

# 在pg_header下增加兩個div標籤(person_info div之後)

# 增加css樣式

.pg_header .icons

.pg_header .icons:hover

效果:

(3)增加訊息數量顯示

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

# 郵件圖示的div下增加乙個span標籤

3# 為span 新增css樣式

.pg_header .icons span

效果:

完整html:

我的資訊

登出修改密碼

修改頭像

3

後台管理頁面1

1.html 標籤 2.css position background text align margin padding font size z index overflow hover opacity float clear both line height border color displ...

後台管理布局之模板繼承

後台管理布局中分 上 左 右 預設的管理介面 左側跟上方的區域不做任何變動 對於右側區域 支援滾動 css新增 overflow scroll 對於右側區域的內容 進行繼承父級的base.html新增模板語言 子檔案使用extends直接繼承 formaction p inputtype text ...

簡單搭建後台管理系統布局

最終實現的效果如下 要求 上面的header固定不動,左面的選單和內容部分的高度到瀏覽器的底部,並且他們的內部可以滾動 寫這個demo需要考慮的幾個問題 1 如果不給html和body設樣式他們的高度是什麼樣的,結果發現他們是沒有高度的和普通div一樣。所以應該把html和body的高度設定成100...