java工程师走向前端学习心路历程（三）

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