【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). 方式二: 适用于单行的注释
/* 我是注释 */
最新文章
- EF上下文对象线程内唯一性与优化
- git教程
- .Net Core 控制台输出中文乱码
- currentStyle
- 关于C# winform中使用pictureBox显示大红叉的原因
- C# 参数化SQL语句中的like和in
- Verilog HDL基础语法讲解之模块代码基本结构
- 今天遇到一个问题,linq语句的写法,查询动态字段
- postInvalidate、removeAllViewsInLayout、refreshDrawableState用法
- 导出Excel事例
- 数学(线性规划):UVAoj 10498 Happiness
- Top 100 words for advanced learners.
- mysql 复习与学习(二)数据库及表结构的创建删除
- 在C++工程中main函数之前跑代码的廉价方法(使用全局变量和全局函数)
- System.getProperty()参数大全
- BZOJ 1086: [SCOI2005]王室联邦 [树上分块]
- 微信小程序中的组件
- iOS 10 之 网络权限带来的坑
- 使用Xfire发布WebService接口遇到的问题:
- 双调欧几里得旅行商问题(TSPhdu2224)
热门文章
- Linux环境进程间通信(二): 信号(上)
- Bundles
- Single Image Haze Removal Using Dark Channel Prior
- Lucene.net入门学习系列(2)
- DateTimePicker.Text不靠谱
- Arduino 各种模块篇 光敏感应模块 light sensor
- linux php 安装GD库
- 动态修改ViewPagerIndicator CustomTabPageIndicator Tab标签文字颜色
- setprecision、fixed、showpoint的用法总结(经典!!超经典!!)
- Python pandas 0.19.1 Intro to Data Structures 数据结构介绍 文档翻译