前端div+css总结（一）布局

2019独角兽企业重金招聘Python工程师标准>>>

这段时间一直在做嘉鹏影视公司的网站，在夏哥的指导下完成第一步，前端的制作。

前端就是我们所能直接看到的页面。以前是用html+表格制作。现在基本上是html,div+css。下面就来介绍基本的流程。

第一步：布局。（初始条件：有一个网页的设计图。就是一张图，最好是psd格式的，方便切片。）

 分析网页，把它划为几大块，经典的是三段式，我这次用的是两段式。就是在一个body里面分为几块。如：

这样网站的结构就很明确了。依次写好相应的和css样式名称。

第二步：布局后在细分。把大块再细分。知道不可再分为止，就是具体到了某个元素了。再找到相似的单元。如：都是英文大标题，都是红色，雅黑的标题，等等。把这些元素定义一个样式，要用就直接引用就可以了。有点小差异的话，也可以在样式后再加一个子选择器如：.Englisht p3  就表示.English 下的p3样式。或直接.English_01等等即可。大体上的属性相同就可以继承了。这样会节省很多样式。

第三步：切片

把网页的设计图，切片，就是把需要的图片，各种不同的背景色切下来。

第四步：书写。

按照既定的规划。一步一步写出来。

转载于:https://my.oschina.net/yuanyichuan/blog/210252