HTML5+CSS3实现动态网页

http://hcysun.me/page/2/

移动端适配：
设计稿里有rem单位的，所以我直接用的rem+媒体查询

切图仔：
1）PS中将设计图打开，选中想要抠出来的图层，CTRL+左键即可提取，分情况考虑是否建立新图层合并，然后存储web形式文件
2）PXCOOK 标注

<a href="javascript:;" class="header_nav">
其中javascript: 是一个伪协议。它可以让我们通过一个链接来调用javascript函数。但是由于这个函数为空，所以我们调用的就是一个空函数，并不会发生任何实质性的改变。同时可以实现a标签的点击运行。如果当页面里面的内容很多的时候，有了上下滚动条，使用href=“#"会发生跳转到页面顶部的问题。而使用href="javascript:;" 就可以避免页面的乱跳


垂直居中：
1）文字居中：模块高和行高一样
例：.header__nav-item{
	height:38px;
	line-height:38px;
}
2）块元素垂直居中于父元素 父元素relative 子元素absolute top:50% maigin-top:高的一半
例： 
.header__wrap{
	height:80px;
	position:relative;
}
.header__logo{
	height:38px;
	position:absolute;
	top:50%;
	margin-top:-19px; 
}
3）块元素水平居中
margin:0 auto;
left:50%;
margin-left:-50px;

BEM设计模式：
模块 {没有前缀，每个单词用-连接}
.screen-1{}
元素{元素在模块之后，可以有多个层级，以__连接}
.header__nav-item_custom_button{}
修饰{某元素或某模块特别的状态， 必须有一个状态名，状态值，用_连接}
.header__nav-item_status_active::after{}

z-index不要超过3级

在里面放图尽量是作为背景图
background:url(../a/b.png) no-repeat center;
若想让背景图铺满整个水平，则background-size:cover;

同一个类型中的文字需要回车：<br/>

四个水平的分区块
<div class="a">
	<div class="a_item b_i_1">
	</div>
	<div class="a_item b_i_2">
	</div>
	<div class="a_item b_i_3">
	</div>
	<div class="a_item b_i_4">
	</div>
</div>

CSS3新特性
1、新选择器 如div:last-child:div节点下面的最后一个直接子节点
2、多列布局： -webkit-coumn-count:3
3、圆角:border-radius
4、渐变背景图：兼容性不太好
background-image:-webkit-gradient(linear,0%,0%,100%,0%,from(#2A8BBE),to(#FE280E));
5、transform 调整位置
6、transitions 有过渡的动画效果
1)
transition:all 1s;
2)
 -webkit-transition:width 2s, height 2s,background-color 2s, -webkit-transform 2s;
 3)
 -webkit-transition:rock 2s infinite ease-in-out .5s;
 @-webkit-keyframes rock{
	0%{transform:rotate(odeg)}
	10%{transform:rotate(odeg)}
	20%{transform:rotate(odeg)}
	30%{transform:rotate(odeg)}
	...
	100%{transform:rotate(odeg)}
}
 //兼容chorme safari
 7、animation : 做复杂动画
 8、transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）


做较复杂动画首先需在html文件中引用js文件     
js文件中
var screenAnimateElements = {
	'.screen-1':[
		'.screen-1__heading',
		'.screen-1__phone',
		'.screen-1__shadow',
	]
};

function setScreenAnimate(screenCls){
	var screen = document.querySelector(screenCls); //获取当前屏元素
	var animateElements = screenAnimateElements[ScreenCls];
	var isSetAnimateClass = false;
	var isAnimateDone = false;
screen.onclick = function{
	if(isSetAnimateClass === false){
		for(var i=0;i<animateElements.length;i++){
			var element = document.querySelector(animateElements[i]);
			var baseCls = element.getAttribute('class');
			//getAttribute() 方法返回指定属性名的属性值
			element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init')
			//更改div class名
			//substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。 题中从下标1到结尾都取
		}
		isSetAnimateClass = true;
		return;
	}
	if(isAnimateDone === false){
		for(var i=0;i<animateElements.length;i++){
			var element = document.querySelector(animateElements[i]);
			var baseCls = element.getAttribute('class');
			element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
		}
		isSetAnimatDone = true;
		return;
	}
	if(isAnimateDone === true){
		for(var i=0;i<animateElements.length;i++){
			var element = document.querySelector(animateElements[i]);
			var baseCls = element.getAttribute('class');
			element.setAttribute('class',baseCls.replace('_animate_done','_animate_init'));
		}
		isSetAnimatDone = false;
		return;
	}
}
}
for (k in screenAnimateElements){
	setScreenAnimate (k);
}


还可以把很多样式放在一起
.screen-1__shadow,
.screen-1__phone,
.screen-1__heading{
	三个样式合在一起
}

缩放：
transform:scale(x,y)

zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化

循环动画：帧动画
即鼠标下拉到不同的div块时顶部导航栏变颜色 并且对应的字样式变红

定义帧动画
@-webkit-keyframes bounce(名字){
	0%,100% {
		transform:scale(0);
	}
	50% {
		transform:scale(1);
	}
}

颜色表示方法：
1：
#ffaabb  r:ff g:aa b:bb
2：
rgba(255,0,0,0.4); r,g,b,透明度

使用帧动画
.className:before{
	-webkit-animation: bounce 2s infinite 1s;//infinite无限循环 1s延迟
}

.className:after{
	content:' ';
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	top:1px;
	left:1px;
	background-color:rgba(255,0,0,0.4);
	border-radius:50%;
	-webkit-animation: bounce 2s infinite;//infinite无限循环
}

JS动画&交互

获取DOM元素
document.querySelector(selector)
获得所有元素
document.querySelectorAll(selector)
获取样式
element.getAttribute('class',cls);
设置样式
element.setAttribute('class',cls);
窗口载入
window.onload = function(){ }
窗口滚动
window.onscroll = function(){ }
点击处理
elem.onclick = function(){ }
滚动条高度获取
document.body.scrollTop

CSS3新特性：
.class:first-child{
第一个元素的样式
}

获取元素(封装)
var getElem = function(selector){
	return document.querySelector(selector);
}
var getAllElem = function(selector){
	return document.querySelectorAll(selector);
}
获取元素样式
var getCls = function(element){
	return element.getAttribute('class');
}
设置元素样式 
其实原理都是通过改变className改变样式
var setCls = function(element,cls){
	return element.setAttribute('class', cls);
}

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。找不到返回-1

为元素添加样式
var addCls = function( element , cls ){
	var baseCls = getCls(element);
	if( baseCls.indexOf(cls) === -1){
		setCls( element , baseCls+' '+cls);//不要忘记空格符
	}
}

split以括号里的内容把字符串分割开（不包括括号里的内容）
join往数组里加入分隔符

为元素删除样式
var delCls = function( element , cls){
	var baseCls = getCls(element);
	if( baseCls.indexOf(cls) != -1){
		setCls( element , baseCls.split(cls).join(' ').replace(/\s+/g,' ');//不要忘记空格符
	}
}

例：
var arr = "Georgeaaa"
document.write(arr.join(' '));
//输出Georgeaaa John Thomasaa
document.write("
");//换行
document.write(arr[0].split('aaa').join(' '));
//输出George a

交互动画第一步：
初始化样式 init
var screenAnimateElements = {

};

设置屏内元素为初始状态
var setScreenAnimateInit = function(screenCls){
	var screen = document.querySelector(screenCls); //获取当前屏元素
	var animateElements = screenAnimateElements[ScreenCls];
	for(var i=0;i<animateElements.length;i++){
			var element = document.querySelector(animateElements[i]);
			var baseCls = element.getAttribute('class');
			element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
		}
}

设置屏内元素动画播放
var playScreenAnimateDone = function(screenCls){
	var screen = document.querySelector(screenCls); //获取当前屏元素
	var animateElements = screenAnimateElements[ScreenCls];
	for(var i=0;i<animateElements.length;i++){
			var element = document.querySelector(animateElements[i]);
			var baseCls = element.getAttribute('class');
			//getAttribute() 方法返回指定属性名的属性值
			element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init')
}


window.onload = function(){
	for (k in screenAnimateElements){
		if(k==='.screen-1')continue;//在第一屏初始状态下不要放动画
		setScreenAnimateInit (k);
	}
}

第二步：滚动到哪就播放到哪里
window.onscroll = function(){
	var top = document.body.scrollTop;
	if (top>1){
		playScreenAnimateDone('.screen-1');
		switchNavItemsActive(0);
	}
	...
}
第三步：导航条变化 变成_status_back
.header{
	transition:all 1s;
}
.header_status_back{
	background-color:rgba(0,0,0,.5);
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:3;
}
.header_status_back .header__logo,
.header_status_back .header__nav-item{
	color:#fff;
}

if(top > 80) {
	addClass( getElem('.header'),'header_status_back')
}
else{
	delClass( getElem('.header'),'header_status_back')
	switchNavItemsActive(0)
}

大纲 _status_in 样式
.outline{
	opacity:0;
	transition:all 1s;
	transform:translate(100%,0);
}
.outline_status_in{
	opacity:1;
	transform:translate(0,0);
}

第三步：双向定位
var navItems = getAllElem('.header__nav-item');
var outLineItems = getAllElem('.outline__item');
var setNavJump = function(i,lib){
	var item = lib[i];
	item.onclick = function(){
		console.log(i);//导航第一项为0 第二项为1 .。
		document.body.scrollTop = i*800;
		//点某个导航立刻会跳到该div
	}
}
for(var i=0;i<navItems.length;i++){
	setNavJump(i,navItems)
}
for(var i=0;i<outLineItems.length;i++){
	setNavJump(i,outLineItems)
}
第四步 对应div导航颜色变红
.header_status_back .header__nav-item_status_active{
	color:red;
}

var switchNavItemsActive = function(idx){
	for(var i=-;i<navItems.length;i++){
		delCls( navItems[i] ,'header__nav-item_status_active')
	}
	addCls( navItems[idx] ,'header__nav-item_status_active')
}

outline同理 全部把名字换掉即可

扩展：滑动门特效
导航变换时会滑动到下一个
<div class="header__nav-tip">
</div>

.header__nav-tip{
	position:absolute;
	width:30px;
	height:2px;
	background-color:#000;
	bottom:0;
	left:0;
	transition:all 1s;
	padding-left:40px;
}
var navTip = getElem('.header__nav-tip');
var setTip = function(idx,lib){
	lib[idx].onmouseover = function(){
		console.log(this,idx);
		navTip.style.left = (idx*70) + 'px';
	}
	var activeIdx=0;
	lib[idx].onmouseout = function(){
		for(var i=0;i<lib.length;i++){
			if(getCls(lib[i]).indexOf('header__nav-item_status_active')>-1){
				activeIdx=i;
				break;
			}
			navTip.style.left = (activeIdx*70) + 'px';
		}
	}
}
for(var i=0;i<navItems.length;i++){
	setTip(i,navItems);
}