欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3与H5的学习

程序员文章站 2024-03-17 13:21:58
...

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