【51】静态网页开发(1)——基础

★文章内容学习来源：拉勾教育大前端就业集训营

本篇目录：

• 网页开发流程
• 网页开发基础
• 版心
• 页面布局流程
• 常见布局类型

一、网页开发流程

二、网页开发基础

• 任意打开一个PC端网页，查看，比如拉勾招聘。
  
• 会发现其中布局的一些规律，以下一一介绍。

三、版心

• 网页中主要内容所在区域，一般水平居中显示，从而让用户的视线更加集中；
• 常见版心数值： 960px、980px、1000px、1200px等。
• 制作方法：标准流中的margin方法：margin: o auto;

四 、页面布局流程

• 为了提高页面制作的效率，常用到以下流程：

1.确定版心；
2.分析页面中行模块，并且分析行模块中的列模块；
3.制作HTML、CSS文件；
4.CSS初始化；（清除一些默认样式、设置一些初始公共样式）
5.运用盒子模型的原理，控制布局。

五、常见布局类型

• 一列固定宽度且居中；
  

• 两列左窄右宽；

• 通栏平均分布；
  

• 更多情况可能一个网页中包含两种及以上的布局类型。

下篇继续：【52】静态网页开发(2)——常见技巧与方法