html5，css3实战

预览地址：预览

github源码：源码

1. 网页开发

HTML5：BEM开发模式，BEM代表块（Block），元素（Element），修饰符（Modifier）。

CSS3：过渡动画、帧动画

JS： 元素获取，事件响应处理

2. 准备

标注工具：像素大厨

雪碧图拼接：gopng

3. 开发

项目骨架：

  
  
  
  


  

    

    H5页面
    

      外观
      配置
      型号
      说明
      其他产品
      立即购买
      

    
  
  

  

  

  

  

    © index.html 京ICP备13046642号
  
  

底部边框2px：（利用伪元素和绝对定位）

.header__nav_item_status_active::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: ' ';
  display: block;
  height: 2px;
  width: 100%;
  background-color: #f01400;
}

第一屏：

 

1. 滚动事件

页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。

页面没有DTD，即没指定DOCTYPE时，使用document.body。

兼容性写法：

var scroll = document.body.scrollTop || document.documentElement.scrollTop

而且对于a链接如果不进行跳转：

Javascript：伪协议，可以通过链接来调用js函数。

或者：阻止默认事件不跳转

    e.preventDefault();

2. JavaScript自定义添加类的函数

对象：能够做到不会重复添加  

// 添加类名
function addClass(element, newClass) {
  var className = element.className.split(' '); //字符串转换成数组，便于遍历转换成对象 
  var classNameMap = {}

  for(var i=0;i