後臺管理頁面佈局 後臺管理頁面佈局
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