HTML5+CSS3实现动态网页

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

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

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

<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
2rgba(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); }

你可能感兴趣的:(前端)