页面布局 - Zoe233

页面布局两大类：
　　主站：

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>

View Code

　　后台管理布局：

　　　　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>

View Code

实例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>

View Code

　　调用图标：
　　　　目前一般都调用在线资源，如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>

View Code

posted on 2017-09-10 21:43 Zoe233 阅读(165) 评论(0) 编辑收藏举报