页面布局两大类：
主站：
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>
