頁面布局兩大類：
主站：
1 <div class='pg-header'> 2 <div style='width:980px;margin:0 auto;'> 3 內容自動居中 4 </div> 5 <div class='pg-content'></div> 6 <div class='pg-footer'></div>
后臺管理布局：
position:
fixed ==> 永遠固定在窗口的某個位置
relative ==> 單獨無意義
absolute ==> 單獨使用，第一次定位，可以在指定位置，滾輪滾動時，不在原來的指定位置（overflow:auto)
a.?左側菜單不動，頁面固定，內容跟隨滾動條滾動
b.?左側菜單以及內容不動
實例1：用position:fixed實現；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .left{ 8 float:left; 9 } 10 .pg-body .menu{ 11 position: fixed; 12 top:48px; 13 left:0; 14 bottom:0; 15 width: 200px; 16 background-color: #dddddd; 17 } 18 .pg-body .content{ 19 position: fixed; 20 top:48px; 21 right: 0; 22 bottom: 0; 23 left:200px; 24 background-color: purple; 25 overflow: auto; 26 27 } 28 body{ 29 margin: 0; 30 } 31 .pg-header{ 32 height: 48px; 33 background-color: blue; 34 color: white; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="pg-header"></div> 40 <div class="pg-body"> 41 <div class='menu left'>caidanlan 42 43 </div> 44 <div class='content left'>content 45 <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> 46 <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> 47 <p>1</p><p>1</p> 48 49 </div> 50 </div> 51 <div class="pg-footer"></div> 52 53 </body> 54 </html>
?
實例2：用position:absolute實現（注意，用該方法實現的頁面，僅需更改overflow屬性即可完成兩種頁面布局的切換）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .left{ 8 float:left; 9 } 10 .right{ 11 float:right; 12 } 13 .pg-body .menu{ 14 position: absolute; 15 top:48px; 16 left:0; 17 bottom:0; 18 width: 200px; 19 background-color: #dddddd; 20 } 21 .pg-body .content{ 22 position: absolute; 23 top:48px; 24 right: 0; 25 bottom: 0; 26 left:200px; 27 z-index:9; 28 background-color: purple; 29 overflow: auto; <!--核心屬性，這個屬性的變更可以出現兩種情況的后臺管理界面--> 30 min-width:px; 31 } 32 33 body{ 34 margin: 0; 35 } 36 .pg-header{ 37 height: 48px; 38 background-color: blue; 39 color: white; 40 line-height:48px; 41 text-align:center; 42 } 43 .pg-header .logo{ 44 width:200px; 45 background-color: cadetblue; 46 } 47 .pg-header .user{ 48 width:160px; 49 background-color: wheat; 50 position:relative; 51 } 52 .pg-header .user .a img{ 53 width: 48px;height:48px;border-radius: 50%; 54 } 55 .pg-header .user:hover{ 56 background-color: aquamarine; 57 58 } 59 .pg-header .user:hover .b{ 60 display: block; 61 62 } 63 64 .pg-header .user .b{ 65 position:absolute; 66 top:48px; 67 z-index:10; 68 background-color:greenyellow; 69 width:160px; 70 display: none; 71 72 } 73 .pg-header .user .b a{ 74 display: block; 75 text-align: left; 76 77 } 78 </style> 79 </head> 80 <body> 81 <div class="pg-header"> 82 <div class="logo left">老男孩</div> 83 <div class="user right"> 84 <a class='a' href="http://www.baidu.com"> 85 <img src="userpic.jpg"/> 86 </a> 87 <div class="b"> 88 <a>我的資料</a> 89 <a>注銷</a> 90 </div> 91 </div> 92 </div> 93 <div class="pg-body"> 94 <div class='menu left'>caidanlan 95 96 </div> 97 <div class='content left'>content 98 <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> 99 <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> 100 <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> 101 <p>1</p><p>1</p> 102 </div> 103 </div> 104 <div class="pg-footer"></div> 105 106 </body> 107 </html>
?
調用圖標：
目前一般都調用在線資源，如http://www.fontawesome.com.cn/
調用方法為，將文件全部下載解壓到開發目錄，在html中：
<link rel='stylesheet' href='font-awesome-4.7.0/css/font-awesome.min.css'/>
其中，一般都是使用壓縮版的css（font-awesome.min.css）；
font-awesome.min.css和font-awesome.css之間的差別在于，壓縮版的里面的每個樣式的css代碼都是一行。
調用其中某個樣式的寫法均從其官網可以找到，如：
1 <div class='a'> 2 <i class='fa fa-superpowers' aria-hidden='true'></i> 3 </div>
?
)
)
：配置中心git示例)
