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

本篇目录：

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

一、网页开发流程

二、网页开发基础

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

三、版心

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

四 、页面布局流程

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

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

五、常见布局类型

  • 一列固定宽度且居中；

  • 两列左窄右宽；

  • 通栏平均分布；

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

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