如何提高html+css的制作效率

Question

我目前的工作，主要还是负责html+css这一块，可是目前一个页面我一天老是搞不定，好头疼啊，加上兼容性调整的话，怎么样也要2天才能完成一个页面啊！！！！！好丢人啊，有木有，，，求大神指点迷津，如何提高这方面的制作速度~~~~~~

Answer 1

试试IDE， webstorm

Answer 2

试试bootstrap

Answer 3

得HTML标签和CSS属性都是什么意义以及特性.
关于HTML标签可以去 http://www.w3school.com.cn/
查CSS可以去这里(CSS参考手册) http://css.doyoe.com/.
上面都是基础.
第二步,熟悉一个前端框架,比如bootstrap,或者你们公司的前端框架.
第三步,对写过的CSS尝试重构或者写一个自己的框架.代码的积累.
这是书能生巧的事,多写,多问,多想,自然就可以提高

Answer 4

我觉得对于HTML+CSS的制作上面说的也都对，我补充一点自己的看法。

1. 先审查整个设计稿，在心里构思出页面的大致结构。 逐步细化每一块的结构，同时包括CSS大致怎么写，比如双列布局的时候 两个DIV 各自左右浮动，这个 在没做之前心里要有一个轮廓。否则 扎笔(键盘)就写，很容易各种返工、修改。

2. 基础。 HTML标签的用法、CSS常用的规则。一时想不起来的话，W3C、MDN去复习。 JS部分现在应该很多人都是在用jQuery ，那么对于jQuery的常用API也要有所熟悉，同 HTML、CSS一样，不清楚的话 W3C、jQuery 官网各种去刷吧。

3. 积累总结。 把你做过的东西总结一下，转化为你的经验，下次遇上同样的问题可以很快解决，否则次次百度，回回挠头，效率注定上不去的。 把一些常用的代码想办法 复用起来，比如 snippets。

4. 善用你的工具。 工欲善其事必先利其器，像了解你自己一样了解你的工具。工具是你在战场上的小(hao)伙(ji)伴(you)，你连你小伙伴都不清楚，还能不能好好玩耍了，小伙伴会伐开心哒。 比如Chrome 的开发者工具，FireFox 的 Firebug。在修改CSS的时，按下shift和方向键，可以以10为基准的修改数值；alt 以 0.1 为基准。 查找元素的时候，以上两者都已实现通过 CSS选择器查找元素。

   如果你用DW、ST、Webstrome 这些编辑器|| IDE，那么也请熟悉她。比如ST删除行的操作，快捷键ctrl+shift+k 要远比你 退格键一个一个删或者选中一行然后删掉快；复制行的时候ctrl+shift+d 也远比你 粘贴复制 来得快一些。

   总之，熟悉你的小伙伴。

5. 保持学习的激情和心态。

坑完了，速度去填坑了，要不要被爆菊了 (-;

Answer 5

对HTML熟悉，知道每个标签的用法，并且用好。
多看看别人写的CSS，想想为什么这样写，自己也多写。

这两者是熟能生巧，兼容自然也就解决了。

Answer 6

1. 基础一定得牢固，别怕一遍遍阅读W3C标准，对于重构人员来讲，必须要做到无手册手写代码能力，Html和CSS的每一个片段、表达式、选择器都要熟知。
2. 在此基础上，深入了解各个浏览器特性，并且经过自身实际的测试，掌握解决方案或Hacking方法。
3. 站在巨人的肩膀上，足够了解那些流行度高，且兼容性较强的开源项目。如网易的NEC、支付宝的AliceUI，Sencha等各种前端CSS或Javascript框架，研习它们代码，学习它们的设计思想和开发模式。
4. 看你措辞，斗胆猜测，你的问题还是出在基础不好上面。《一万小时大师理论》这本书说过，任何事情没有一万小时都不行，所以勤加练习吧。这个世界上很少有那种本身就比你聪明，随便三下五除二做的东西，就是比你一下午做的东西好的人。多操作多写才知道重点在哪，瓶颈在什么地方，长此以往也就找到突破口了，对于程序员来讲，就是多写。
5. 一些提高生产力的东西，学不会也要硬着头皮学，磨刀不误砍柴工。你花一周跌跌撞撞搞明白的东西，可能对你未来10年都有帮助，我主写PHP对CSS只是一知半解，说的不深入希望对你有帮助：LiveReload，这是个文件夹监控插件，有Firefox扩展版本，目的是监测你电脑中某个路径的文件一旦改变，自动刷新浏览器。我觉得这是前端开发里必不可少的工具，尤其是多屏工作时，左屏写代码，右屏打开浏览器调试，如果手工刷新浏览器麻烦死，这个插件只要你随时保存文件，随时浏览器就刷新； Github，这个不用细说了吧，这两年Javascript兴起之后Github多么的火，不管你是学习别人项目还是与人协作开发，这是提高你自己技术水平必须要会的东西，所谓站在巨人肩上，就是你首先得站上去，Github上巨人多；Firefox和Firebug这都不用说了，你不写Javascript，对你有用，但用处不是特别大；一个好的IDE，语法提示功能特别强，能把浏览器支持情况也反馈出来，这个你自己找；哦对了，还有zencode或Emmet之类的Html简写工具，能为你提速很多。