博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
切图仔的一点工作经验
阅读量:5757 次
发布时间:2019-06-18

本文共 693 字,大约阅读时间需要 2 分钟。

切图仔的一点工作经验

0 磨刀不误砍柴功

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

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

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

一台足够快的电脑。

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

1 PSD到手之后

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

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

2 编写HTML

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

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

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://sgvkx.baihongyu.com/

你可能感兴趣的文章
Unable to determine local host from URL REPOSITORY_URL=http://
查看>>
java基础(1)
查看>>
ORACLE配置,修改tnsnames.ora文件实例
查看>>
Workstation服务无法启动导致无法访问文件服务器
查看>>
.Net组件程序设计之远程调用(二)
查看>>
ant中文教程
查看>>
Linux常用命令(一)
查看>>
WSUS数据库远端存储条件下切换域及数据库迁移
查看>>
【VMCloud云平台】SCAP(四)租户(一)
查看>>
linux释放内存的方法
查看>>
基于 Android NDK 的学习之旅----- C调用Java
查看>>
我的友情链接
查看>>
Android图形显示系统——下层显示4:图层合成上(合成原理与3D合成)
查看>>
Windows 10 技术预览
查看>>
Tomcat http跳转https
查看>>
一个自动布署.net网站的bat批处理实例
查看>>
tomcat 安装
查看>>
我的友情链接
查看>>
Centos6.6安装选包及基础场景说明
查看>>
java基础面试题-1
查看>>