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.使用英文命名,驼峰命名法。

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

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

展开阅读全文

没有更多推荐了,返回首页