後臺管理頁面佈局 後臺管理頁面佈局
https://www.cnblogs.com/bigberg/p/9284709.html
後臺管理頁面佈局
一、整體分佈
簡單的一個頁面佈局,頭部、左側選單欄,右側內容,頭部和選單欄固定位置,內容部分如果很長就會出現滾動條
兩種方法能實現,其實兩種差別只有一個屬性不一樣。
1.1 使用position:fixed
1.先定義三個div標籤
1 2 3 4 5 |
<
body
>
<
div
class="pg_header"></
div
>
<
div
class="pg_content"></
div
>
<
div
class="pg_footer"></
div
>
</ body
>
|
2.設定頭部樣式,高48px,背景色藍色
1 2 3 4 5 6 7 8 9 10 11 |
<
style
>
body{
margin: 0 auto;
}
.pg_header{
height: 48px;
color: white;
}
</
style
>
|
頂部出現一個藍色長條
3.在pg_content裡劃分出兩個區域,一個左側選單欄,一個右側內容區
一般會要求左側選單欄能固定位置,一直顯示在左側,高度就是整個瀏覽器高度
+ View Code左側增加一個灰色長條:
4.同樣我們想要右側的內容區也能像選單欄一樣,固定位置、並佔據整個右側位置。並且在內容過長時,會出現滾動條(overflow實現)
+ View Code當內容很長時,會出現滾動條:
1.2 使用position:absolute
第二種方法相比第一種方法,只需將position:fixed改為position:absolute
再為content增加一個最小寬度的屬性,當瀏覽器縮小時,小於一定寬度是,就會出現橫滾動條,可以防止頁面內容佈局錯亂,但是這樣header也需要修改一下,加了最小寬度以後,header在有橫滾動條時寬度無法滿屏
+ View Code整體效果和上一個差不多:
二、頭部設計
2.1 頭部左側增加logo
(1)首先定義兩個經常用到的float css樣式
1 2 3 4 5 6 |
.left{
float: left;
}
.right{
float: right;
}
|
(2)在header下定義一個div
+ View Code增加了logo:
2.2 header右側增加登入資訊
(1)頭像
右側個人資訊其實只要一個頭像,滑鼠移到頭像上時,會有資訊框出現
+ View Code出現頭像:
(2)增加一個div,用於顯示資訊和操作,其位置相對於peron_info固定
+ View Code這樣完成後還是不行,因為看不到這個標籤,我們需要對pg_header也增加一個z-index屬性,設定值為10
(3)預設情況下是看不到info這個標籤的,所以還需要對info的css樣式增加display:none屬性
+ View Code(4)顯示info標籤
增加了display:none後,資訊標籤預設看不到,現在的需求是滑鼠移到person_info這個div標籤時,info標籤顯示
+ View Code滑鼠移到頭像出就顯示資訊:
2.3 插入圖示
頭部資訊中通常還有郵件和提醒服務存在,也就是插入一下圖示,登入後提示一下資訊需要處理。
需要的圖示可以在https://fontawesome.com中去下載,並放到自己的專案中。
(1)尋找圖示
在下載圖示的網站上尋找需要的圖示
點選相應的圖示,拷貝
(2)增加郵件和鈴鐺的圖示
+ View Code效果:
(3)增加訊息數量顯示
如果有3封郵件,就在郵件旁邊顯示數字3
+ View Code效果:
完整html:
+ View Code
一、整體分佈
簡單的一個頁面佈局,頭部、左側選單欄,右側內容,頭部和選單欄固定位置,內容部分如果很長就會出現滾動條
兩種方法能實現,其實兩種差別只有一個屬性不一樣。
1.1 使用position:fixed
1.先定義三個div標籤
1 2 3 4 5 |
<
body
>
<
div
class="pg_header"></
div
>
<
div
class="pg_content"></
div
>
<
div
class="pg_footer"></
div
>
</
body
>
|
2.設定頭部樣式,高48px,背景色藍色
1 2 3 4 5 6 7 8 9 10 11 |
<
style
>
body{
margin: 0 auto;
}
.pg_header{
height: 48px;
color: white;
}
</
style
>
|
頂部出現一個藍色長條
3.在pg_content裡劃分出兩個區域,一個左側選單欄,一個右側內容區
一般會要求左側選單欄能固定位置,一直顯示在左側,高度就是整個瀏覽器高度
+ View Code左側增加一個灰色長條:
4.同樣我們想要右側的內容區也能像選單欄一樣,固定位置、並佔據整個右側位置。並且在內容過長時,會出現滾動條(overflow實現)
+ View Code當內容很長時,會出現滾動條:
1.2 使用position:absolute
第二種方法相比第一種方法,只需將position:fixed改為position:absolute
再為content增加一個最小寬度的屬性,當瀏覽器縮小時,小於一定寬度是,就會出現橫滾動條,可以防止頁面內容佈局錯亂,但是這樣header也需要修改一下,加了最小寬度以後,header在有橫滾動條時寬度無法滿屏
+ View Code整體效果和上一個差不多:
二、頭部設計
2.1 頭部左側增加logo
(1)首先定義兩個經常用到的float css樣式
1 2 3 4 5 6 |
.left{
float: left;
}
.right{
float: right;
}
|
(2)在header下定義一個div
+ View Code增加了logo:
2.2 header右側增加登入資訊
(1)頭像
右側個人資訊其實只要一個頭像,滑鼠移到頭像上時,會有資訊框出現
+ View Code出現頭像:
(2)增加一個div,用於顯示資訊和操作,其位置相對於peron_info固定
+ View Code這樣完成後還是不行,因為看不到這個標籤,我們需要對pg_header也增加一個z-index屬性,設定值為10
(3)預設情況下是看不到info這個標籤的,所以還需要對info的css樣式增加display:none屬性
+ View Code(4)顯示info標籤
增加了display:none後,資訊標籤預設看不到,現在的需求是滑鼠移到person_info這個div標籤時,info標籤顯示
+ View Code滑鼠移到頭像出就顯示資訊:
2.3 插入圖示
頭部資訊中通常還有郵件和提醒服務存在,也就是插入一下圖示,登入後提示一下資訊需要處理。
需要的圖示可以在https://fontawesome.com中去下載,並放到自己的專案中。
(1)尋找圖示
在下載圖示的網站上尋找需要的圖示
點選相應的圖示,拷貝
(2)增加郵件和鈴鐺的圖示
+ View Code效果:
(3)增加訊息數量顯示
如果有3封郵件,就在郵件旁邊顯示數字3
+ View Code效果:
完整html:
+ View Code