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

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. python中staticmethod classmethod及普通函数的区别

    staticmethod 基本上和一个全局函数差不多,只不过可以通过类或类的实例对象 (python里光说对象总是容易产生混淆, 因为什么都是对象,包括类,而实际上 类实例对象才是对应静态语言中所谓对 ...

  2. C# 获取Get请求返回

    /// <summary> /// 远程获取页面数据 /// </summary> /// <param name="Url">地址</p ...

  3. python打包成window可执行程序

    python程序可以通过python hello.py执行,但是需要安装python的解释器,并配置环境变量,打包成exe程序之后可以直接执行. 使用setup工具和py2exe可以做到这一点. 最简 ...

  4. 快速开发平台WebBuilder中ExtJS表格的增删改查

    使用WebBuilder可实现表格的自动增删改查功能,而无需编写前台脚本和后台SQL. WebBuilder开源项目地址:http://www.putdb.com 自动生成的页面: <!DOCT ...

  5. CSS:CSS学习总结

    CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...

  6. IOS中KVO模式的解析与应用

    IOS中KVO模式的解析与应用 最近老翁在项目中多处用到了KVO,深感这种模式的好处.现总结如下: 一.概述 KVO,即:Key-Value Observing,它提供一种机制,当指定的对象的属性被修 ...

  7. MacOSX 下.app支持同时运行多个实例

    在MacOSX下的.app是一个程序包(实际上是个目录),双击该目录时系统会根据包的目录结构启动相应的可执行程序..app的程序默认是单实例运行的,所以从.app启动的程序实例只有一个(可执行程序不受 ...

  8. cin 和scanf,scanf比cin快很多

    //#include <iostream> #include <stdio.h> //#include <fstream> //using namespace st ...

  9. Web自动化测试学习点总结

    "大不可量,深不可测"这是出自<韩非子·主道>的一段话.关于自动化测试也是如此,web系统开发完成,测试人员对页面进行测试,寻找bug.这个过程,需要摸索着前进. 什么 ...

  10. 版本问题 Java:Unsupported major.minor version 51.0 (unable to load class . . .

    导入别人的项目时报错  Java:Unsupported major.minor version 51.0 (unable to load class . . . 后发现错误是由于class编译器的J ...