頁面布局
今天學習Html頁面布局知識，設計的知識點不深，只是讓初級開發者概覽一下現在主流前端的設計布局。
單列布局
布局一：頭部、主體、底部等寬
布局二：頭部、底部自適應；主體固定寬度
雙列布局
布局一：左側邊欄固定，右邊主體自適應
布局二：右側邊欄固定，左邊主體自適應
布局三：左右兩列固定寬度；二列全部采用浮動；使用偽類撐開父級
布局四：左右兩列固定寬度；采用絕對定位布局
三列布局
布局一：左右兩列固定寬度；中間主體區自適應；采用浮動加外邊距；區塊順序非常重要
布局二：左右兩列絕對定位；中間主體區自適應；中間用外邊距實現
實戰：QQ空間
大招開始
最簡潔的布局形式
單列等寬布局
1<!--布局一：頭部、主體、底部等寬-->
2<!--
31.頁面頭部、主體、底部在一個容器中統一設置
42.容器中子塊只設計高度
5-->
6<!DOCTYPE html>
7<html lang="en">
8<head>
9 <meta charset="UTF-8">
10 <title>單列布局</title>
11
12 <style type="text/css">
13 .container{
14 max-width: 960px;/*最大寬度 */
15 margin: 0 auto; /*設置內部塊元素居中*/
16 }
17 .header{
18 height: 50px;
19 background-color: red;
20 }
21 .main{
22 height: 600px;
23 background-color: blue;
24 }
25 .footer{
26 height: 50px;
27 background-color: red;
28 }
29
30 </style>
31</head>
32<body>
33<div class="container">
34 <div class="header">頭部</div>
35 <div class="main">主體</div>
36 <div class="footer">底部</div>
37
38</div>
39</body>
40</html>
布局二
1<!--布局二：頭部、底部自適應；主體固定寬度
2頭部、底部自適應頁面寬度，但內容是固定的
3主體寬度固定
4
5思路：
61.頭部，尾部放置在一個獨立的容器中，僅設置高度
72.頭部，尾部內容區仍和主體同寬
83.主體放在單獨容器中，並設置水平居中
9-->
10<!DOCTYPE html>
11<html lang="en">
12<head>
13 <meta charset="UTF-8">
14 <title>單列布局二</title>
15
16 <style type="text/css">
17 .container{
18 max-width: 300px;/*最大寬度 */
19 margin: 0 auto; /*設置內部塊元素居中*/
20 background-color: aquamarine;
21 }
22 .header{
23 height: 50px;
24 background-color: red;
25 }
26 .main{
27 height: 600px;
28 background-color: blue;
29 }
30 .footer{
31 height: 50px;
32 background-color: red;
33 }
34
35 </style>
36</head>
37<body>
38 <div class="header">
39 <div class="container">頭部</div>
40 </div>
41
42 <div class="main">
43 <div class="container">主體</div>
44 </div>
45
46 <div class="footer">
47 <div class="container">底部</div>
48 </div>
49</body>
50</html>
