DDR爱好者之家 Design By 杰米
进入口碑也已经有三四个月的时间了,感觉在工作过程中收获最大的是在编写HTML页面上,从视觉稿到网页DEMO,没办法,基本都在做这样的工作。从最初的wap整站、杭州首页、bug需求到广州首页、上海首页、店铺大全等页面改版,到当下的口碑卡频道首页改版的DEMO的编写。心情从最初的烦躁、枯燥的调试到轻松自如,到当下的信手拈来、游刃有余,摆脱了IE6、7 Fuck bug的束缚,每次尝试到不用写一个hack来完成整个页面布局的滋味,记忆犹新。
在公司同事中学到了不少的经验,也总结出来了自己的一套开发步骤:
整体分析页面布局
归纳统一、分类,切图(CSS Sprites)
拆分模块、规划HTML结构、规划并编写CSS
组合成页面(得益于YUI的页面布局生成器组件)
第一步:整体分析页面布局。
当拿到视觉稿的时候,不是着手去想怎么编写HTML、CSS代码,而是先从整体上分析页面的布局,观察页面各个模块的间距差别、划分header,body,footer、CSS Sprites、切图事宜、页面色调、背景如何设置等等,之后再细化到每个模块的布局,从外到内,逐步细化。可以说,这一步是非常关键的,它给了下面将要进行的代码编写一个整体的框架布局。
第二步:归纳统一、分类,切图(CSS Sprites)
整体分析过后,就是归类、组合模块的时候了。这一步还是的需要从整体来看,分析页面哪些模块的样式相似(常见的就是ul列表,以及一些图文编排),包括颜色、样式、修饰、背景、宽度、padding、margin、border等等。将相似的模块的样式归类,这为接下来编写CSS代码大有好处,可以最大化的精简CSS代码。
第三步:拆分模块、规划HTML结构、规划并编写CSS
在前期工作都做了之后,这步就改到了动手写代码的时候了,我喜欢将每个模块或者列拆分开来编写,这样做的好处是我可以先不管整体布局,从HTML语意化的角度架构HTML结构,此时HTML代码较少,在编写CSS以及查看HTML代码的时候不用花费太多时间了(痛恨HTML代码多了,上下拉滚动条,累人!)
第四步:组合成页面。
在每个模块都编写好之后,借助页面布局生成器(幸亏有了它,效率第一啊!缺点是HTML结构复杂,-_-),将每个拆分的模块整合起来,同时也清理CSS文件的代码,整合CSS代码也有一些些技巧的:在CSS Sprites里设置HTML元素的背景的时候,把全部的元素都写在一处:
/* background url */
.rhs-bd,.business-join h1,.yk-mod-content .business-join p a,.business-open-flow ul,.business-case-list ul li,
.kb-bank-toolbar ul,.kba-consumer h1,.kba-consumer h1,.kba-consumer ul li,.kba-new-join ul li,
.recommend-shop-list,.hot-sign,.search-merchant-bd{background:url(ka_bg.png) no-repeat;}
这样相应的元素只需要设置background-position就OK了,代码整洁,结构清晰,重构维护成本小。还有一点就是慎用margin,在IE6、7下margin会引发很多问题,所以在编写CSS和规划HTML布局的时候,需要考虑到需要使用margin还是使用padding,各有各的好处,margin能保持HTML结构比较简洁,而padding原理是在当前HTML元素的子元素中设置padding来实现布局(当然也可以在当前元素下,但是它会改变宽度和高度,需要重新调整宽高)。所以我的经验是:在模块的HTML和CSS编写方面,都会尽量使用padding,特别是涉及到float的时候,使用padding会避免很多问题。有句话说的好:既然明知道这样做会引发bug,那就尽量不这样做。
上面的开发步骤因人而已,偶是喜欢并且习惯这样的一个思索开发过程,正在体验它的乐趣。
在公司同事中学到了不少的经验,也总结出来了自己的一套开发步骤:
整体分析页面布局
归纳统一、分类,切图(CSS Sprites)
拆分模块、规划HTML结构、规划并编写CSS
组合成页面(得益于YUI的页面布局生成器组件)
第一步:整体分析页面布局。
当拿到视觉稿的时候,不是着手去想怎么编写HTML、CSS代码,而是先从整体上分析页面的布局,观察页面各个模块的间距差别、划分header,body,footer、CSS Sprites、切图事宜、页面色调、背景如何设置等等,之后再细化到每个模块的布局,从外到内,逐步细化。可以说,这一步是非常关键的,它给了下面将要进行的代码编写一个整体的框架布局。
第二步:归纳统一、分类,切图(CSS Sprites)
整体分析过后,就是归类、组合模块的时候了。这一步还是的需要从整体来看,分析页面哪些模块的样式相似(常见的就是ul列表,以及一些图文编排),包括颜色、样式、修饰、背景、宽度、padding、margin、border等等。将相似的模块的样式归类,这为接下来编写CSS代码大有好处,可以最大化的精简CSS代码。
第三步:拆分模块、规划HTML结构、规划并编写CSS
在前期工作都做了之后,这步就改到了动手写代码的时候了,我喜欢将每个模块或者列拆分开来编写,这样做的好处是我可以先不管整体布局,从HTML语意化的角度架构HTML结构,此时HTML代码较少,在编写CSS以及查看HTML代码的时候不用花费太多时间了(痛恨HTML代码多了,上下拉滚动条,累人!)
第四步:组合成页面。
在每个模块都编写好之后,借助页面布局生成器(幸亏有了它,效率第一啊!缺点是HTML结构复杂,-_-),将每个拆分的模块整合起来,同时也清理CSS文件的代码,整合CSS代码也有一些些技巧的:在CSS Sprites里设置HTML元素的背景的时候,把全部的元素都写在一处:
/* background url */
.rhs-bd,.business-join h1,.yk-mod-content .business-join p a,.business-open-flow ul,.business-case-list ul li,
.kb-bank-toolbar ul,.kba-consumer h1,.kba-consumer h1,.kba-consumer ul li,.kba-new-join ul li,
.recommend-shop-list,.hot-sign,.search-merchant-bd{background:url(ka_bg.png) no-repeat;}
这样相应的元素只需要设置background-position就OK了,代码整洁,结构清晰,重构维护成本小。还有一点就是慎用margin,在IE6、7下margin会引发很多问题,所以在编写CSS和规划HTML布局的时候,需要考虑到需要使用margin还是使用padding,各有各的好处,margin能保持HTML结构比较简洁,而padding原理是在当前HTML元素的子元素中设置padding来实现布局(当然也可以在当前元素下,但是它会改变宽度和高度,需要重新调整宽高)。所以我的经验是:在模块的HTML和CSS编写方面,都会尽量使用padding,特别是涉及到float的时候,使用padding会避免很多问题。有句话说的好:既然明知道这样做会引发bug,那就尽量不这样做。
上面的开发步骤因人而已,偶是喜欢并且习惯这样的一个思索开发过程,正在体验它的乐趣。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]