分层语义化模板实践 ---- 张克军
DESCRIPTION
webrebuild.org北京第一届交流会-悟道WEB标准,分层语义化模板实践。TRANSCRIPT
Designer和FrontEnd Engineer都是信息的传达者
demo:http://hikejun.com/work/qq/spec/example_mod_compare.html
step 1: 搭建HTML根据wireframe和统一的页面布局、模块结构
demo: http://hikejun.com/work/qq/share_8.4/page_naked.png
step 2: 核心样式标签reset,字体,链接,模块容器,通用模块样式(提示、列表、按钮等),页面布局,以及常用的rules(高亮、隐藏、清浮动等)
demo: http://hikejun.com/work/qq/share_8.4/page_base_style_1.png
step 3: 模块统一样式定义产品(或频道)级模块统一样式
demo: http://hikejun.com/work/qq/share_8.4/page_base_style_2.png
step 4: 特色样式页面级专有样式
demo: http://hikejun.com/work/qq/share_8.4/page_base_style_3.png
重用demo: http://hikejun.com/work/qq/share_8.23/mod_comp.html
‘精彩视频’重用: http://hikejun.com/work/qq/share_8.23/sports.qq.com.htmlhttp://hikejun.com/work/qq/share_8.23/news.qq.com.html
1. 标准布局结构demo: http://hikejun.com/work/qq/share_8.4/example2/article-layout.html
II. 标准模块结构demo: http://hikejun.com/work/qq/share_8.4/example2/article.html
III. 标准模块demo: http://localhost/~kejun/douban/ui-framework/test/all.html
IV. 新模块的产生(派生和组合)demo: http://localhost/~kejun/douban/ui-framework/test/all.html