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

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

江老实 Web前端工程师
难度初级
时长50分
学习人数
综合评分9.63
118人评价 查看评价
9.6 内容实用
9.6 简洁易懂
9.7 逻辑清晰
  • steps of E position!
    查看全部
    0 采集 收起 来源:引导单元定位

    2016-09-02

  • steps of other position!
    查看全部
    0 采集 收起 来源:引导单元定位

    2016-09-02

  • .step1{ background: url(./images/guide11.png); width: 745px; height: 329px; top: 132px; left: -9px; /*display: none;*/ } .step1 a{ top: 231px; left: 491px; /* ? 取消a 默认的操作行为 && JS传播事件、取消事件默认行为、阻止事件传播 1. <a href="http://xgqfrms.xyz" onclick="return func()">点击我</a> 2. <a href="javascript:;" onclick="check()">点击我</a> 3. <a href="javascript:0;" onclick="check()">点击我</a> 4. 非IE的用"e.preventDefault();",IE的用"window.event.returnValue = false;" */ } .step1 span{ top: 143px; left: 682px; }
    查看全部
    0 采集 收起 来源:引导单元定位

    2018-03-22

  • chrome 调试,mask 位置; 使用方向键调节
    查看全部
    0 采集 收起 来源:引导单元定位

    2016-09-02

  • text-indent: -9999px; overflow: hidden; 隐藏文字?
    查看全部
    0 采集 收起 来源:引导单元定位

    2016-09-02

  • .steps a{ position: absolute; width: 95px; height: 32px; background: rgba(255,0,255,0.7); }
    查看全部
    0 采集 收起 来源:引导单元定位

    2016-09-02

  • 745 329
    查看全部
    0 采集 收起 来源:引导单元定位

    2016-09-02

  • left:50%; margin-left: - (div.width/2); CSS实现div水平居中!(前提:div有具体的宽度)
    查看全部
    0 采集 收起 来源:引导单元定位

    2016-09-02

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

    2016-09-02

  • <style> /*SCSS*/ *{ margin: 0; padding: 0; } html{ width: 100%; height: 100%; } body{ background: url(./images/bg.png) center top no-repeat; /* === background: url(./images/bg.png) top no-repeat; link: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position */ width: 100%; height: 100%; } .mask{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.7); display: none; /*do something later*/ }
    查看全部
    0 采集 收起 来源:网页蒙版设置

    2018-03-22

  • http://caniuse.com/#search=opacity http://www.w3.org/TR/css3-color/ CSS3 Opacity - REC Method of setting the transparency level of an element
    查看全部
    0 采集 收起 来源:网页蒙版设置

    2016-09-02

  • opacity:0.5; filter:alpha(opacity=50); rgba(0,0,0,0.5);
    查看全部
    0 采集 收起 来源:网页蒙版设置

    2016-09-02

  • http://www.xgqfrms.xyz/HTML5-Animaitions/ABC/images/bg.png <style> /*SCSS*/ *{ margin: 0; padding: 0; } body{ background: url(./images/bg.png) center top no-repeat; /* === background: url(./images/bg.png) top no-repeat; link: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position */ width: 100%; height: 100%; } </style>
    查看全部
    1 采集 收起 来源:编程练习

    2018-03-22

  • tips: 使用 background-image 代替website,便于学习!
    查看全部
    0 采集 收起 来源:HTML结构介绍

    2016-09-01

  • 1.蒙版 2.引导区
    查看全部
    0 采集 收起 来源:HTML结构介绍

    2016-09-01

举报

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

微信扫码,参与3人拼团

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

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