後台管理頁面布局

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...