CSS3与H5的学习

H5网站的学习

1.什么是BEM？
BEM代表块（Block），元素（Element），修饰符（Modifier）。
模块 –> 没有前缀，多个单词用 - 连接
元素 –> 元素在模块之后，可以有多个层级，以 _ 连接
修饰 –> 某元素、或者某模块特别的状态，必须有一个状态名和状态值，使用 _ 连接。

2.用到的几种居中方法：

2.1文字垂直居中(文字所在的模块)
height：40px;
line-height: 40px;  //高与行高设置为一样的长度

2.2块元素垂直居中于父元素
.header_wrap{
   height:80px;
   position:relative;
}
// 子绝父相
.header_logo{
   height:38px;
   position:absolute;
   top:50%;
   margin-top:-19px;  //设置为高的一半
}

2.3块级元素水平居中
margin：0 auto;

3.遇到的没用过的标签
3.1 overflow 属性规定当内容溢出元素框时发生的事情。
—》hidden：内容会被修剪，并且其余内容是不可见的。

3.2 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

3.3 opacity 属性设置元素的不透明级别。
—> 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

3.4 background-size 属性规定背景图像的尺寸。
—>cover ：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain ：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

4.动画的制作
4.1 两种遍历
遍历对象{}：

for(k in screemAnimateElements){
   setScreemAnimate(k);
}

遍历数组：

 for(var i=0;i<animateElements.length;i++){
    document.querySelector(animateElements[i]);
}

4.2字符串截取函数 substr、字符串替换函数replace

substr:
<script type="text/javascript">

var str="Hello world!"
document.write(str.substr(3))

</script>

输出：lo world!

replace：
<script type="text/javascript">

var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))

</script>

将使用 "W3School" 替换字符串中的 "Microsoft"：

4.3 transform
这个很好用呀，基本的小动画都可以用这个实现~~
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
具体语法：http://www.w3school.com.cn/cssref/pr_transform.asp

4.4小结
第一屏我都花了一个晚上没弄好，想着明明是跟着视频打的代码为什么别人的能实现效果我的不能…..em….肯定是自己哪里打错了。于是我第二日中午有重新检查代码，然后发现当我点击屏幕的时候控制台报错说XXX的长度获取不到，没有定义。我就奇怪了，明明都定义了。

var element = document.querySelector(animateElements[i]); /

去拿到这个元素，怎么会木有？？？黑人问号，然后我就只能又倒着看老师操作一遍。发现….哦….自己给第一屏定义的名字拼写错误了…改过来后就能成功完成第一屏的动画了。遇到问题，细心认真！拜托。

5.js动画与交互

页面载入完成后，所有动画元素设置_animate_init
页面滚动到哪个屏幕，哪个屏幕播放动画&导航条、大纲的出现
导航条双向定位&大纲定位

5.1 split/join

//为元素删除样式
var delCls = function(element , cls){
    var baseCls = getCls(element);  //获取样式
       //如果当前元素有这个样式
       if (baseCls.indexOf(cls) != -1) {
        //给element设置样式
        //replace(/\s+/g,' ') 加一个正则为了去掉多余的空格符
        setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '));
    }
}

split() 方法用于把一个字符串分割成字符串数组。
比如，如果我获取到的元素样式cls= outline aaa ==> split(cls) ==> outline ，aaa
所以我们就能拿到被拆分的两个字符串。

join() 方法用于把数组中的所有元素放入一个字符串。
outline ，aaa ==> outline aaa

5.2 获取滚动页面

要获取当前页面的滚动条纵坐标位置：document.documentElement.scrollTop;

document.body.scrollTop 的话有些浏览器不认识，可能会获取不到长度。反正我用了这个没获取到...一直显示0，然后我就换成上面那个就获取到了。

H5网站的学习

猜你喜欢