不断学习，人生将会成功。
1. 序
一直想模仿一个整套的商城, 今天在 shopNC 里面看到了想要的一切, 所以把一些组件, 命名规范等记录下来, 提高以后的开发效率。
官方网站 PC : shopNC: PC
触屏版 WAP: shopNC: WAP
2. 首页
上面把一些重要的结构标记出来。
1. 头部
1. 头部可以分为三块, 顶栏的布局, 搜索, 导航 分别对应 puiblic-top-layout、header-wrap、public-nav-layout ( 带有 public-*** 前缀的都是公用的 )
2). public-top-layout 顶栏导航知识点记录
通过鼠标悬浮移入移出添加 .hover 类使其显示。 还有一点就是 小箭头 的实现方式, 使用了 css3 的 transform: rotate() 属性进行角度的变幻, 小箭头代码如下:
3). 公用头部搜索 .header-wrap 分成 4 块
4). site-logo 下面的图片采用了 max-width, max-height 的方式进行对图片的尺寸进行限制, 感觉是一种很好的方式
5). .head-user-menu 里面有一个小三角, 下面是一个向下的小三角
6). .public-nav-layout: 导航部分, 可以分为 2 块
2. 分类导航
1). 分类导航分为 两块, 内容块 和 右边的图片。
3. 焦点轮播图 ( 核心 )
焦点轮播图, 分为 3 大块
1). 焦点轮播图
2). 倒计时
3). tab 切换 ( 滑动门 )
2. 汲取精华
1. 命名规范
1). public-*** 开头的类名作为公用的类
2). 属性的命名顺序
2. css 配合 js 实现效果
1). 举个栗子, 就拿首页 顶部 导航的悬浮出现下拉 来说, 事先写好一个 .hover , 然后给每个 dl 绑定一个 hover 事件, 利用 js 触发事件添加 hover 类, 这样写的话会少些许多 js...
3. 插件
1. perfect-scrollbar.min.js: 滚动条插件 资料地址>>
4. 注释
1). 方式一: 适用于大的模块
/* 公用导航区域
-------------------------------------- */
2). 方式二: 适用于单行的注释
/* 我是注释 */