为了账号安全,请及时绑定邮箱和手机立即绑定

如何实现“新手引导”效果

江老实 Web前端工程师
难度初级
时长50分
学习人数
综合评分9.63
118人评价 查看评价
9.6 内容实用
9.6 简洁易懂
9.7 逻辑清晰
  • alpha:一个灰度通道,通常用来表示不透明度。

    opacity:不透明性。

    解析:IE8以下浏览器都不支持 opacity css样式,可以使用IE自带的“滤镜”来实现,如下代码:
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    上面代码的作用设置为 70% 的透明。

    查看全部
    0 采集 收起 来源:练习题

    2019-05-08

  • 一个div块级元素没有主动为其设置宽度和高度,浏览器会为其分配可使用的最大宽度(比如全屏宽度),但是不负责分配高度,块级元素的高度是由子元素堆砌撑起来的。那么,html和body标签的高度也都是由子级元素堆砌撑起来的。


    还有,元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用,如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用,此时的情况是父元素高度依赖子元素堆砌撑高,而子元素依赖父元素的定高起作用,互相依赖,却都无法依赖,死循环了。


    那如何解决这个问题呢,可以让子元素先定高,这样是可以解决;但是如果子元素一定要依赖父元素高度呢?


    上面的html代码可以看出,div的父元素是body,body的父元素是html,通过height:100%层层向上,找到顶级获取定高。


    所以出现了html和body同时设置height:100%,那html的上级是谁呢?


    通过上面的事实知道,浏览器负责分配块级元素宽度,那么浏览器也一定可以分配高度(只是没有做),那么浏览器本身是有宽度和高度的,设置html的height:100%,就可以获取浏览器的定高了,后面的body和div也就有了依赖。


    查看全部
    0 采集 收起 来源:编程练习

    2019-02-13

  • window.onload=function(){    var oMask=document.getElementById('mask');	var oSearch=document.getElementById('searchTip');		var aStep=oSearch.getElementsByTagName('div');	var aA= oSearch.getElementsByTagName('a');	var aClose=oSearch.getElementsByTagName('span');	//读取cookie	var res=document.cookie.substring(5);	alert("当前cookies="+"("+res+")");		//判断是否来过	if(res!="www.open.com.cn"){		alert("没有登录过");		oMask.style.display=oSearch.style.display=aStep[0].style.display="block";				//下一步按钮		for( var i=0; i<aStep.length; i++){			aA[i].index=i;//为每一个按钮增加一个index属性,为后面引用做好准备			aA[i].onclick=function(){				this.parentNode.style.display="none";				//aStep[this.index+1].style.display="block";								if(this.index < aStep.length-1){//如上,如果不加这个判断,到了最后一个会报错				aStep[this.index+1].style.display="block";			}				else if(this.index==aStep.length-1){//如果到了最后一个,结束整个操作				oMask.style.display="none";				this.style.display=oSearch.style.display="none"; 			}		}	}				//关闭按钮		for(var i=0; i<aClose.length;i++){			aClose[i].onclick=function(){				oMask.style.display=oSearch.style.display="none";			}		}			//如果没有来过,添加cookie	var oDate=new Date();	oDate.setDate(oDate.getDate()+30);	document.cookie="name=www.open.com.cn;expires="+oDate;	}}


    查看全部
    1 采集 收起 来源:编程练习

    2018-12-13

  • position:absolute

    margin-left:-490px

    text-indent:-999px

    cursor;pointer

    查看全部
    1 采集 收起 来源:编程练习

    2018-04-13

  • 使用定位居中 position:absolution;绝对定位 left:50%;定位到页面的一半 margin-left:-490px (980/2); 左留白为负,即向左移动 本身的一半,使其居中
    查看全部
    0 采集 收起 来源:引导单元定位

    2018-01-19

  • text-indent:-999px; overflow:hideen; var oDate = new Date(); oDate.setDate(oDate.getDate()+30); var res = document.cookie="name=myenem;exprise="+oDate; 还有经典的 aA[i]=i; for循环与 clik异步的问题
    查看全部
    0 采集 收起 来源:总结

    2018-03-22

  • getElementsByTagName方法返回的是一个类数组的NodeList对象,能使用length属性和数组下标取值。
    查看全部
    0 采集 收起 来源:练习题

    2017-11-11

  • 带有href的a标签,如果绑定单击事件,应该同时把href禁用。方法可以是修改href="javascript:void(0)";也可以是,在js点击事件函数内部最底层写上 return false;
    查看全部
  • html{height:100%} body{height:100%} 解决兼容性问题,使得内容可以撑开。
    查看全部
    0 采集 收起 来源:网页蒙版设置

    2017-11-11

  • 透明度设置: opacity:0.5; //火狐浏览器,谷歌浏览器 filter:alpha(opacity=50); //针对IE
    查看全部
    0 采集 收起 来源:网页蒙版设置

    2017-11-11

  • 整体思路: 1. 每个引导框及其中的小按钮 采用绝对定位布局 2. 全部隐藏,只显示第一个引导框和遮罩层 3. 点击下一步,隐藏当前引导框,显示同辈元素的下一个引导框 4. 当点击到最后一个引导框时,完成引导,隐藏所有引导框和遮罩层 5. 其中点击每个引导框的关闭按钮,结束引导 ,隐藏引导框和遮罩层 6.js中cookie的设置:document.cookie="name=value;expries=time; path=xxx; domain=xxx ; secure ";
    查看全部
    0 采集 收起 来源:总结

    2018-03-22

  • IE8以下浏览器都不支持 opacity css样式,可以使用IE自带的“滤镜”来实现,如下代码: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); 上面代码的作用设置为 70% 的透明。
    查看全部
    0 采集 收起 来源:练习题

    2017-09-30

  • 透明度设置: opacity:0.5; //火狐浏览器,谷歌浏览器 filter:alpha(opacity=50); //针对IE
    查看全部
    0 采集 收起 来源:网页蒙版设置

    2017-09-20

  • 透明度设置: opacity:0.5; //火狐浏览器,谷歌浏览器 filter:alpha(opacity=50); //针对IE
    查看全部
    0 采集 收起 来源:网页蒙版设置

    2017-07-18

  • getElementsByTagName方法返回的是一个类数组的NodeList对象,能使用length属性和数组下标取值。
    查看全部
    0 采集 收起 来源:练习题

    2017-06-12

  • IE8以下浏览器都不支持 opacity css样式,可以使用IE自带的“滤镜”来实现,如下代码: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); 上面代码的作用设置为 70% 的透明。
    查看全部
    0 采集 收起 来源:练习题

    2017-05-13

  • js实现核心代码部分
    查看全部
  • document.cookie="name1=value1;expires=期限";
    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1.对div和css相关内容精通掌握;2. 具有一定的JavaScript和JQuery知识基础
老师告诉你能学到什么?
1.掌握“新手引导”的实现思路 2.了解html结构布局 3.掌握简便的定位方法 4.学会用 原生JavaScript代码和JQuery两种方式实现依次显示效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!