web前端布局篇（切图）

web前端布局篇（切图）

这里的切图不是指ps里面的切图，而是指web前端工程师将设计图转化为静态页面的过程。

在布局的时候，我们通常会以设计图为蓝本，然后将设计图拆分，变成一个一个的HTML标签，搭配上css样式，实现静态页面的布局。

web前端新手在布局的时候出现的问题

1.只注重结果，忽略代码结构。
2.代码的重构性很差，稍微一加减板块，整个页面全部瘫痪。
3.CSS冗余样式很多。
4.标签使用不准确，不考虑标签对浏览器的友好程度。
5.不注意代码分离，喜欢把样式写在页面里，甚至写行内样式。
6.不注意代码格式，不换行不缩进。
7.命名不规范。
……

问题很多，这里就不一一列举了。

怎么解决这些问题？

1.将设计图归类，把同类的块和元素归成一类，便于编写公共样式。
2.代码注意清除浮动和宽高的计算，避免标签超出父类元素的范围。
3.CSS合理的使用选择器，将重复的代码合并。
4.尽量减少使用对浏览器不友好的标签，例如（table、h1）等。
5.在写页面之前，建好大致的文件夹，便于存放不同的文件，进行代码分离。
6.建立良好代码的编写习惯。
7.使用英文命名，驼峰命名法。

其实呢，道理人人都懂，但是做起来是很难的。因此，为了养成良好的编码习惯，其实最主要的在于，自己没有意识到这样写出来的代码会带来什么样的后果。

为什么要注意这些问题呢，其实原因很简单。因为代码和页面都是不固定的。当你编写代码的时候，有可能设计需求也在时时刻刻的改变，因此，在编写代码的时候，如果不注意一些规范和经验，就会造成后期维护困难等问题，而在团队开发中，假设一个人的代码写的很乱，也会导致在别人修改你的代码时，需要更多的沟通，降低效率。