前端制作的一些技巧分享(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

原文地址:https://www.cnblogs.com/aaa6818162/p/1523128.html