切图仔的一点工作经验
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啦!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。