簡單的乙個頁面布局,頭部、左側選單欄,右側內容,頭部和選單欄固定位置,內容部分如果很長就會出現滾動條
兩種方法能實現,其實兩種差別只有乙個屬性不一樣。
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(2)在header下定義乙個div.right
# 定義div增加了logo:# css樣式
.pg_header .logo
.pg_header .logo a img
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這樣完成後還是不行,因為看不到這個標籤,我們需要對pg_header也增加乙個z-index屬性,設定值為10我的資訊
登出修改密碼
修改頭像
# 為其設定css樣式
.pg_header .person_info .info
.pg_header .person_info .info a
(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...