网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

Div+css布局：

div布局样式：

1.默认情况下每个div都会重启一行

2.设置大小：width和height

3.Position样式：绝对位置和相对位置

4.Float样式：浮动设置

5.Clear样式

堆叠顺序z-index:

居中：

•盒子属性：

–margin（外边距/边界）

•可统一设置或四边分开设置

•margin属性

–margin

–margin-top

–margin-right

–margin-bottom

–margin-left

–border（边框）

–padding（内边距/填充 ）

•padding属性

–padding

–padding-top

–padding-right

–padding-bottom

–padding-left

•各属性又分为

四个方向

div+css布局的优缺点：

表格布局方式：

表格可以用来做页面布局，但是table布局存在代码冗余过长、不符合HTML规范、搜索引擎不友好等问题

头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

  
头部区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

/* 导航条 */
.topnav {
  overflow: hidden;/* 当子元素浮动时，它的父元素不是不在了，因为父元素的高height：auto为自动值，就是根据里面的内容自动设置高度，由于子元素设置了左浮动，已经浮动起来了属于浮动流，不在普通流中，因此父元素普通流中的内容为空，所以没有高度。解决方法就为给浮动块的父元素设置overflow：hidden；当然还有其他方法，这个最为简便。 */
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

内容区域

内容区域一般有三种形式:

• 1 列：一般用于移动端
• 2 列：一般用于平板设备
• 3 列：一般用于 PC 桌面设备

    

        
第一列
        
网页布局有很多种方式，一般分为以下几个部分：**头部区域、菜单导航区域、内容区域、底部区域**。
    

    

        
第二列
        
网页布局有很多种方式，一般分为以下几个部分：**头部区域、菜单导航区域、内容区域、底部区域**。
    

    

        
第三列
        
网页布局有很多种方式，一般分为以下几个部分：**头部区域、菜单导航区域、内容区域、底部区域**。
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

不相等的列

不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。

        /* 左右两侧宽度 */
        .column.side {
            width: 25%;
        }

        /* 中间区域宽度 */
        .column.middle {
            width: 50%;
        }



        

            

                
左侧栏
                
左侧栏
            

            

                
主区域内容
                
网页布局有很多种方式，一般分为以下几个部分：**头部区域、菜单导航区域、内容区域、底部区域**。
                
网页布局有很多种方式，一般分为以下几个部分：**头部区域、菜单导航区域、内容区域、底部区域**。
            

            

                
右侧栏
                
右侧栏
            
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

/* 底部样式 */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}


  
底部区域

1
2
3
4
5
6
7
8
9
10

iframe布局（后台布局）

页面管理


1
2
3

弹出框布局

响应式网页布局

@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
1
2
3
4
5
6

  
我的网页
  
重置浏览器大小查看效果。



  链接
  链接
  链接
  链接



  

    

      
文章标题
      
2019 年 4 月 17日
      
图片
      
一些文本...
      
响应式布局页面，页面的布局会根据屏幕的大小来调整。响应式布局页面，页面的布局会根据屏幕的大小来调整。响应式布局页面，页面的布局会根据屏幕的大小来调整。
    
    

      
文章标题
      
2019 年 4 月 17日
      
图片
      
一些文本...
      
响应式布局页面，页面的布局会根据屏幕的大小来调整。响应式布局页面，页面的布局会根据屏幕的大小来调整。响应式布局页面，页面的布局会根据屏幕的大小来调整。
    
  
  

    

      
关于我
      
图片
      
关于我的一些信息..
    
    

      
热门文章
      
图片
      
图片
      
图片
    
    

      
关注我
      
一些文本...
    
  



  
底部区域




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166