java工程师走向前端学习心路历程(三)
来源:互联网 发布:linux vim 无法保存 编辑:程序博客网 时间:2024/06/06 00:21
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工程师走向前端学习心路历程(二)
- 心路历程(三)-国庆节
- 前端学习(三)
- 前端工程师学习路线
- Web前端工程师的林林总总(一) -- 三种Web前端工程师的基本类型
- 前端工程师不得不知道的ES6新特性(三)
- 复习软考的心路历程(三)
- 前端面试学习(三)
- Web前端工程师学习路线
- Web前端工程师学习路线
- 前端工程师ps学习笔记
- 前端开发工程师学习历程
- 前端Web工程师学习路线
- 软件开发工程师(JAVA)中级考试大纲之------- 四:(三)maven介绍及学习
- Web前端初级工程师走向中级甚至高级的一次重要蜕变
- 前端学习总结(八)NodeJS——前端工程师通向后端的里程碑
- 各种转换成容器---更新中......
- 在oracle中关于imp命令的详细讲解
- float f = 3.4是否正确
- sensor工作流程
- 24、oracle存储结构: 表空间/数据文件/段/分区/块
- java工程师走向前端学习心路历程(三)
- event.srcElement的用法
- ORACLE SQL:经典查询练手第一篇
- -version 查看当前ant版本
- 双网卡共享上网的完全解决方案
- 修改Linux内核参数,减少TCP连接中的TIME-WAIT sockets
- python字符串、元组和列表常用的一些方法
- ubuntu 11.10(32位系统)下编译android源码 make错误解决办法
- 在oracle中修改口令的命令