【1】ShopNC 模仿笔记(一)

不断学习，人生将会成功。

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). 方式二: 适用于单行的注释

/* 我是注释 */