2

blog

切图仔的一点工作经验

0 磨刀不误砍柴功

一个趁手的编辑器(比如自己调教好的st3)或IDE(如Hbuilder、webstorm),可以极大的提高自己的工作效率。

调试功能强大、实现规范标准的浏览器(Chrome!)。

明确浏览器兼容要求,能用啥该用啥想想清楚。

一台足够快的电脑。

多学多做,代码基础扎实。

1 PSD到手之后

从美工那拿到PSD文件后,先别急着敲,仔细看一遍,想想html结构该怎么建,哪些元素可以重用,一些效果该怎么实现。

如果美工做图的时候能把什么命名字体行距内外边距标注清楚,能省切图仔多少事

2 编写HTML

先创建好模板,常用的meta标签、重置css这些先带上。

接下来写页面的框架,定好几个大的区块,往里面填具体的结构,注意结构要清晰明确语义化。

3 编写CSS

类名

我个人倾向于BEM命名法,当然,我现在水平不够,不太纯

写css的时候,靠着IDE智能提示,那感觉,特爽!

伪元素

装饰性元素可以尽量用伪元素来实现,什么小图标小线段序号(使用css计数器)之类的东西,可以有效减小HTML文档的复杂度。

杂七杂八的一些技巧

高宽不定死

减少计算量,方便更改

少用浮动

如果不是非要兼容IE7,那使用inline-block可以替掉很多需要使用float的场景。

少用浮动,那由浮动引起的一些问题也就没有了,像什么破坏DOM流。

必要的回退
/*先写回退,再写高级样式*/
background-color: #fff;
background-color: rgba(256, 256, 256, 0.48);
使用高级选择器

很多情况下都不用js啦!

慢慢补充

结尾


cc长空
1.9k 声望158 粉丝

前端萌新