前端开发者必须知道的页面布局-单列布局篇
页面布局
今天学习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>
有任何问题联系我 1992883611@qq.com
