HTML5,CSS3 【实战】

预览地址：

github地址：

一：网页开发

1.HTML 5 标签，标签的结构用到 BEM开发模式

2.CSS3、CSS过渡动画、帧动画

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

前端开发（静态页开发-----> 动画效果开发）

二：工具

标注工具：像素大厨

雪碧图拼接: CSS雪碧图即CSS Sprite（精灵）

三：开发

开发技巧：从大到小

BEM开发模式【CSS样式规范化】

BEM的CSS命名规范

• B: 表示块，可以抽象成一个组件
• E: 表示元素，组件下的一个元素，多个元素形成一个组件
• M:表示修饰符，可以用来表示元素的状态，比如激活状态，颜色，大小

__和--连接符这是什么鬼

• __主要用来表示块(B)和元素(E)间的连接
• --用来表示块或者元素与状态的连接
• 使用单个的 - 中划线作为你自己的样式分隔符。

 

 

 

1. 滚动事件

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

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

js的window.onscroll事件兼容各大浏览器！

    为窗口添加滚动条事件其实非常的简单，

    window.οnscrοll=function(){};

    注意在获取滚动条距离的时候

    谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；即

    var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;

    这样才能兼容各个浏览器！

兼容性写法：

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

一：window.onload的用法

https://blog.csdn.net/nuan__nuan/article/details/72825719