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来渲染。知道了他的布局,那我们模仿他做一个同样的东西出来