前端制作的一些技巧分享(1)

http://www.cssrain.cn/article.asp?id=1363

在看这篇文章之前，我们先读一个笑话：
"小沈阳"版设计师
1.做图其实可痛苦的了……设计一做一改，一天就过去了；嚎~设计再一改一调，整个晚上就过去了；嚎~
2.做图最痛苦的事儿是啥，知道不？就是，图没做完，设计又改了；
3.做图最最痛苦的事儿是啥，知道不？ 就是，图好不容易做完了，方案全改了；
4.做图最最最痛苦的事儿是啥，知道不？ 就是，图做完了，狗日的客户跑了；
5.做图最最最最最痛苦的事儿是啥，知道不？ 就是，狗日的客户又回来了,图给删没了；

虽然是一个笑话，但相信很多设计师对上面笑话都有深刻体会，所以我不干设计干制作。（额!）
但后来发现制作也是痛苦的。为了减少痛苦，我闭关修炼，终于领悟了页面制作的真谛。
那就是多练，多收集，多实践。
比如：我在页面制作的时候经常会把代码写成一个个小的模块。代码也用统一的通吃结构写，
这样随便他们（后端开发者）怎么改，到了我这里只要很短的时间稍做调整即可。
固定的网页的结构怎么变也离不了那几个模式，所以常用的代码可以写到一个html中储备。

例如：
常用组合：
http://www.kuailaibar.com/常用组合.html
自适应按钮：
http://cssrain.cn/demo/cssSkill/按钮自适应宽度导航/index.html
表单模板：
http://cssrain.cn/demo/cssSkill/表单模板/demo.html
淘宝圆角：
http://cssrain.cn/demo/cssSkill/淘宝圆角/box_demo.html
阴影效果：
http://cssrain.cn/demo/cssSkill/为元素添加阴影效果/demo.html
制作进度条：
http://cssrain.cn/article.asp?id=1361
使用CSS制作小型提示框：
http://cssrain.cn/article.asp?id=1358

通过这些小的模块，再加上自己固有的那点CSS技术，那么一个网站也就措手可得了。

个人心得：
多练：光说不练是不行的，特别是做前端开发这块。因为说的时候，往往只是整体的，不会说细节方面的，然而一个布局Bug一般都是细节引起的。

多收集：最好的方式就是浏览牛人的博客，国内UED好多，自个搜索吧。记得订阅它们。记得注意他们的友情链接，牛人也不少哦。订阅订阅，统统订阅。记住订阅后，每天一定得把文章读完，否则日积月累就会吓死你的。

多实践：实践出真理。通过实践，你会慢慢发现你们公司的开发模式和套路。比如页面的样式全部用class，把id留给程序员。写css要从全局考虑，也就是说在做的时候先要把文档全看一边做到心中有数，看完后那些模块和css可以到处复制粘贴就基本知道了，接下来就是在前期把模块的css写好了，刚开始慢点没关系，伟人说过我们今天大踏步的后退就是为了明天大踏步的前进，就是这个道理，况且我们还没有退只是起步稍微慢了点。

最后送给大家一个完整版的例子(山寨哦)：
http://www.kuailaibar.com/testwork/my163.html

本文所涉及的例子下载：
http://cssrain.cn/demo/cssSkill/cssSkill.rar