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

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

/* 我是注释 */

【1】ShopNC 模仿笔记(一)的更多相关文章

  1. ShopNc基本介绍

    ShopNc学习笔记: 1.shopNc每个文件夹定义了单入口文件eg:shopnc/admin/index.php, shopnc/cms/index.php 2.MVC M: $model = M ...

  2. shopnc 商城源码阅读笔记--开篇概述

    关于shopnc 以下是摘抄自百度百科的关于shopnc的介绍: ShopNC商城系统,是天津市网城天创科技有限责任公司开发的一套多店模式的商城系统. 本系统具有商城系统非常完整和专业的功能与流程,系 ...

  3. shopnc 商城源码阅读笔记-缓存技术

    缓存方式 : 从 shopnc 的缓存驱动目录 /framework/cache里已有的实现类来看,shopnc支持以下5种缓存方式 apc Eaccelerator file memcache xc ...

  4. 桦仔 笔记4-徐 模仿灾难发生时还原adventurework数据库 示例 stopat

    1 --模仿灾难发生时还原adventurework数据库 示例 stopat 2 3 BACKUP DATABASE AdventureWorks 4 TO DISK= 'D:\MSSQL\Data ...

  5. javascirpt怎样模仿块级作用域(js高程笔记)

    因为javascript没有块级作用域的概念,所以在块语句中定义的变量,实际上是在包括函数中而非语句中创建的. 如: function outputNumbers(count){ for(var i= ...

  6. Javascript高级编程学习笔记(25)—— 函数表达式(3)模仿块级作用域

    昨天写了闭包 今天就来聊聊块级作用域的事情 在绝大多数编程语言中,都有块级作用域这个概念 什么是块级作用域呢? 前面我们在刚开始讲的时候说过,JS中的大括号(不在赋值运算符的后面)表示代码块 块级作用 ...

  7. Java-马士兵设计模式学习笔记-迭代器模式-模仿Collectin ArrayList LinckedList

    Java Iterator模式 Java Iterator模式, 模仿Collectin ArrayList LinckedList 一.有如下几个类 1.接口Collection.java 2.接口 ...

  8. javaFX笔记----ComboBox模仿qq账号下拉框删除账号

    myComboBox.setCellFactory( new Callback<ListView<String>, ListCell<String>>() { @O ...

  9. pygame 笔记-2 模仿超级玛丽的弹跳

    在上一节的基础上,结合高中物理中的匀加速直线运动位移公式 ,就能做出类似超级玛丽的弹跳效果. import pygame pygame.init() win = pygame.display.set_ ...

随机推荐

  1. 上传文件大小限制,webconfig和IIS配置大文件上传

    IIS6下上传大文件没有问题,但是迁移到IIS7下面,上传大文件时,出现HTTP 404错误. IIS配置上传大小,webconfig <!-- 配置允许上传大小 --><httpR ...

  2. mac在线恢复教程

    上个周,我本来想升级一下Xcode,可是我的系统是10.8de,xcode5.0.1 最低支持10.8.4 所以就想升级一下我的mac的系统,可是因为我的appstore 是从别人的电脑上考过来的,要 ...

  3. revel框架教程之CSRF(跨站请求伪造)保护

    revel框架教程之CSRF(跨站请求伪造)保护 CSRF是什么?请看这篇博文“浅谈CSRF攻击方式”,说的非常清楚. 现在做网站敢不防CSRF的我猜只有两种情况,一是没什么人访问,二是局域网应用.山 ...

  4. unittest 框架

    unittest 框架 学习unittest 很好的一个切入点就是从selenium IDE 录制导出脚本.相信不少新手学习selenium 也是从IED 开始的. IDE学习参考: 菜鸟学自动化测试 ...

  5. RTB撕开黑盒子 Part 1: Datacratic's RTB Algorithms

    这篇文章是讨论Datacratic所用的统计和经济理论的一些内容.我们开发了real time bidding算法s.为了实现广告主的目标,我们的算法自动地利用其它广告主的次优策略,并再查看广告的底价 ...

  6. 论公司spring的滥用

    这个公司每个项目用不同的一套开发框架,实在忍不住拿一个出来说说事.

  7. Arduino 各种模块篇 光敏感应模块 light sensor

    It looks like this one: This one isn't a digital light sensor, so it's very simple. http://www.seeed ...

  8. TOGAF架构内容框架之架构制品(上)

    TOGAF架构内容框架之架构制品(上) 4. 架构制品(Architectural Artifacts) 架构制品是针对某个系统或解决方案的模型描述,与架构交付物和构建块相比,架构制品既不是架构开发方 ...

  9. 代码创建 WPF 旋转动画

    一.WPF窗体上有一个名为rectangle2的矩形 对应的XAML如下: <Window x:Class="WpfVideo.Window1"         xmlns= ...

  10. java mysql 数据类型对照

    java mysql 数据类型对照 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述             VARCHAR L+N VARCHAR java.lang. ...