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

手风琴效果

难度初级
时长35分
学习人数
综合评分9.43
122人评价 查看评价
9.8 内容实用
9.3 简洁易懂
9.2 逻辑清晰
  • 1、浮动布局 2、绝对定位和相对定位 3、遮罩层透明度变化 4、css3动画效果:transition 5、用伪类实现鼠标悬停时阴影的控制 6、在IE浏览器与标准浏览器下,绑定事件的区别 7、target 8、通过改变<li>的className实现最终效果
    查看全部
    1 采集 收起 来源:总结

    2018-03-22

  • 用css3实现平滑过渡:.wrapper ul * { transition:all linear 100ms;}
    查看全部
  • 元素的明暗度是控制遮罩层的透明度实现的。 .wrapper:hover .mask { opacity:0.15;} 鼠标悬停的列表项:.wrapper li.big a:hover .mask { opacity:0;}
    查看全部
  • 【虚线的实现方法】 .line { position:absolute; right:0px; width:0px;height:128px;border:1px dashed #ccc;} 由于只需要虚线边框的效果,故该元素的宽度为0。 【遮罩层】 .mask { position:absolute; top:0px; left:0px; height:128px; width:156px; opacity:0; background:#000;} 遮罩层的宽度和高度与列表项的宽高一样,设置背景色和透明度。 为处于展开状态的列表项设置class,单独写效果。 让为展开的图片超出列表项一点。img { right:-15px;}
    查看全部
  • n个列表项总宽度 = (n-1)*列表项宽度 + 1*展开的列表项宽度
    查看全部
  • 浮动布局; 通过设置一个遮罩层的透明度来改变某个元素的明暗度; javascript属性 / css3的transition 实现动画效果; 监听鼠标事件onmouseover。
    查看全部
  • bind(list[i], 'mouseover', mouseoverHandler);
    查看全部
    0 采集 收起 来源:实战题

    2015-01-19

  • <p class="price"><i>1</i>折起</p>
    查看全部
    1 采集 收起 来源:实战题

    2018-03-22

  • function initList(){ //取得外部元素 var outer = document.getElementById('subject'); //取得每个列表项 var list = outer.getElementsByTagName('li'); //用不了,报错getElementsByTagName of null for(var i =0; i < list.length; i++){ //对每个列表绑定鼠标悬停事件的监听 bind(list[i], 'mouseover', mouseoverHandler); } }
    查看全部
  • 1浮动 2绝对定位和相对定位 3遮罩层 4动画效果:transition 5鼠标悬停时阴影的控制
    查看全部
    0 采集 收起 来源:总结

    2015-01-17

  • 浮动布局 绝对定位与相对定位(position:absolute 与 position:relative) 遮罩层 明暗度的变化(opacity:0.15) CSS3动画效果——transition(transition:all linear 0.1s) 鼠标悬停时阴影的控制(a:hover{opacity:0;}) 在IE浏览器与标准浏览器下,绑定事件的区别: function bind(el,eventType,callback){ if(typeof el.addEventListener === 'function'){ el.addEventListener(el,eventType,callback,false); }else if(typeof el.attachEvent === 'function'){ el.attachEvent('on' + eventType,callback); } }
    查看全部
    0 采集 收起 来源:总结

    2014-12-22

  • 图片明暗度是根据控制遮罩层的阴影呈现的。opacity属性
    查看全部
  • 权重越高优先级也就越高
    查看全部
  • 超出的部分隐藏(overflow:hidden) 超出的部分显示(overflow:visible) 隐藏元素(display:none) 视觉隐藏元素(visibility:hidden)
    查看全部
    0 采集 收起 来源:练习题

    2015-01-18

  • 1/1. 并排显示的列表如何实现? A 用div元素绝对定位来实现 B 用div元素display:table来实现 C 用table元素 D 用ul li元素通过左浮动来实现 答案为D,其他方法的确也可以实现,但是都有着各种问题。A答案使用起来不灵活。B答案,是一个取巧的方式但是涉及到兼容性的问题,却不如D 答案,简单有效。C 元素有一些弊端, 文档载入的时候一定要载入完了整个table元素才开始显示列表,对用户不友好。D 是最有效,而且兼容性最好的排列方式
    查看全部
    0 采集 收起 来源:练习题

    2014-12-11

举报

0/150
提交
取消
课程须知
1.HTML中无序列表的相关知识 2.掌握CSS样式的内容,尤其是CSS3的基础内容 3.对JavaScript中鼠标事件等知识熟悉
老师告诉你能学到什么?
1.浮动布局的相关知识 2.掌握CSS3的transition属性 3.会用代码实现手风琴效果

微信扫码,参与3人拼团

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

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