java工程师走向前端学习心路历程(三)
2012-02-29 16:04
393 查看
no.4、不积硅步,何以至千里——小功能学习篇
上一篇做了html大的框架布局处理,这里再做个小功能点的分析,依然是阿里巴巴美容护肤频道(http://page.china.alibaba.com/shtml/household/beauty.html),当初接手前端也是使用了这个页面进行学习的,既然是分析,那就拿自己最熟悉的东西,我们不是邯郸学步,只做模仿和借鉴!因为任何高深的武艺都是从模仿开始的。布局已经做好,那么可以拿第一层出来做个小实验,即下图中的“美容旗舰店 所有分类”
在上一篇中布局已经搭好,该模块处在第一层的的第一列栅格中 即id="agencyjoin-markup-1st"的层中的class="grid-5"的栅格中。先看看他的布局:
<div class="grid-5"> <div class="mod-makeup-categories"> <div class="cell-header"> <h3><em class="orange">美容旗舰店</em>所有分类</h3> </div> <div id="categoriesMakeup" class="content"> <div class="obj-categories item-1st">...特色精品...</div> <div class="obj-categories item-2st">...日韩畅销...</div> <div class="obj-categories item-3st">...国货精品...</div> <div class="obj-categories item-4st">...欧美畅销...</div> </div> </div> </div>
其实这个栅格中有两个mod,我们只拿出第一个mod来做点分析,解释下,mod是grid下面一层的单位。像这类模块的样式命名都是mod开头的。class="mod-makeup-categories" 命名规则就是mod+“语义话的名字”class="cell-header",cell又是mod下面的一个单元,cell里面才是我们要表达的东西,如这里的“美容旗舰店,所有分类”class="obj-categories",可以看出,相同的属性都用这个class来渲染。知道了他的布局,那我们模仿他做一个同样的东西出来
相关文章推荐
- java工程师走向前端学习心路历程(一)
- java工程师走向前端学习心路历程(二)
- 面试题总结——走向JAVA高级工程师
- Java后端工程师学习大纲
- Java工程师学习列表
- Java工程师学习线路
- Java工程师学习列表
- 学习前端开发,一段心路历程,这个世界根本没有速成的方法
- 25岁Java工程师如何转型学习人工智能?
- 25岁Java工程师如何转型学习人工智能?
- java工程师个人学习计划
- Java前端技术学习
- Java互联网开发工程师学习路径
- 前端工程师必备收藏:学习资源全网罗
- 【转】【转】一个一年工作经验的java工程师从工作初到今天的所有收藏的学习java的网站(有些很经典
- java工程师 学习路线图
- java高级开发工程师学习路线图
- 前端开发工程师学习历程
- Java后端工程师学习大纲
- 从零走向专业,腾讯前端大牛经验分享:如何快速学习前端开发?