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

手风琴效果

难度初级
时长35分
学习人数
综合评分9.43
122人评价 查看评价
9.8 内容实用
9.3 简洁易懂
9.2 逻辑清晰
  • list-style列表前缀
    查看全部
    0 采集 收起 来源:实战题

    2016-08-29

  • 遮罩层的实现步骤: 1)在每个父容器下absolute定位一个大小相同的子容器,设置背景色并将透明度设置为了0,这样看上去遮罩层就隐形了 2)当鼠标滑过一项列表时,要使除该项以外其它列表有阴影,可对大容器设置遮罩层,当鼠标悬停时,opacity为非零值,而将列表容器的.wrap:hover div设置成透明度为0,这里值得注意的是hover应该用在哪里
    查看全部
    0 采集 收起 来源:实战题

    2016-08-29

  • 遮罩层的实现: 在每个父容器里使用absolute定位一个子容器,由于该容器没有显示内容所以看上去并没有什么变化,但如果设置hover效应在添加背景样式就会有效果了,这里的明暗度就是通过设置子容器添加背景颜色,还要注意的是需要对其设置透明度,不然的话背景色会覆盖之前的内容就起不到明暗效果了
    查看全部
    0 采集 收起 来源:实战题

    2016-08-29

  • 遮罩层的暗度是通过控制遮罩层颜色来控制的不是通过opacity实现的,opacity只是起到控制透明度而不是明暗度
    查看全部
    0 采集 收起 来源:实战题

    2016-08-29

  • 经过测试发现,如果某元素使用absolute定位,而其长辈元素有多层使用relative属性,那么其参照物应该选择离其最近的长辈容器
    查看全部
    0 采集 收起 来源:实战题

    2016-08-29

  • 关于relative和absolute的共用,如果元素使用absolute定位,那么其参照物是body容器,而不是其父容器,但是一旦给其父容器添加relative属性其参照物就成了父容器
    查看全部
    0 采集 收起 来源:实战题

    2016-08-29

  • 对标签设置宽度width=0且显示一条边框可实现线条功能
    查看全部
    0 采集 收起 来源:实战题

    2016-08-29

  • 权值的重要性: .wrapper li a:hover .mask{ opacity:0;} .wrap:hover .mask{opacity:0.15}由于前者的权值是大于后者的所以当鼠标悬浮,对应的元素暗度为0而不是0.15,这就是使用后代选择器的好处
    查看全部
    0 采集 收起 来源:实战题

    2016-08-29

  • 关于文字部分的绝对定位,之所以是要用绝对定位的原因有两个也正是绝对定位的两大特点:1 为了文字在父容器的右上角显示 2 使后面的元素不受文字定位前位置的影响,即消散之前的位置不占据空位
    查看全部
    0 采集 收起 来源:实战题

    2016-08-29

  • opacity透明度
    查看全部
  • 这里的绝对定位使得图片向右下角放缩
    查看全部
  • overflow:hidden,overflow:超出部分,hidden:隐藏
    查看全部
  • <!doctype html>是可以小写的,在html中一般不区分大小写
    查看全部
    0 采集 收起 来源:实战题

    2018-03-22

  • 斜体标签<i>
    查看全部
  • 所谓的手风琴效果不是指手风琴声音而是指图片的伸缩就像手风琴一样,这里提到可以用三种方法实现,一种是利用js的属性值,第二种是利用css3的transport属性,还有就是.。。。。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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