课程笔记
课程/HTML/CSS/前端开发
手风琴效果
介绍
章节
问答
笔记
Bossuo
2016-11-15
ui样式调整
截图
0赞 · 1采集
谢小婷
2016-10-06
超出的部分隐藏(overflow:hidden) 超出的部分显示(overflow:visible) 隐藏元素(display:none) 视觉隐藏元素(visibility:hidden) opacity透明度 【虚线的实现方法】 .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;
1赞 · 0采集
成信eleven
2016-08-29
opacity透明度
0赞 · 0采集
成信eleven
2016-08-29
这里的绝对定位使得图片向右下角放缩
0赞 · 0采集
成信eleven
2016-08-29
overflow:hidden,overflow:超出部分,hidden:隐藏
0赞 · 0采集
UFO2015
2016-08-19
hover{ //big }
截图
0赞 · 0采集
霜花似雪
2016-04-03
超出的部分隐藏(overflow:hidden) 超出的部分显示(overflow:visible) 隐藏元素(display:none) 视觉隐藏元素(visibility:hidden) .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.15;} opacity 表示透明度 【虚线的实现方法】 .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;}
0赞 · 0采集
code前端
2015-08-26
【虚线的实现方法】 .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;} 遮罩层的宽度和高度与列表项的宽高一样,设置背景色和透明度。
0赞 · 0采集
spring_summer
2015-08-26
让图片位置在右下角:bottom:0;right:0; 让图片位置在左上角:top:0;left:0
0赞 · 0采集
如风_0006
2015-08-08
【虚线的实现方法】 .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;}
0赞 · 2采集
xurouna
2015-02-13
超出的部分隐藏(overflow:hidden) 超出的部分显示(overflow:visible) 隐藏元素(display:none) 视觉隐藏元素(visibility:hidden) .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.15;} opacity 表示透明度
0赞 · 2采集
hekie
2015-01-26
超出的部分隐藏(overflow:hidden) 超出的部分显示(overflow:visible) 隐藏元素(display:none) 视觉隐藏元素(visibility:hidden)
截图
0赞 · 1采集
hekie
2015-01-25
【虚线的实现方法】 .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;}
0赞 · 1采集
Missy
2014-06-07
手风琴02
截图
0赞 · 0采集
Missy
2014-06-07
手风琴01
截图
0赞 · 0采集
哼哼熹
2014-06-01
最终的css样式
截图
0赞 · 0采集
哼哼熹
2014-06-01
wrapper.img超出列表right:-15px
截图
0赞 · 0采集
哼哼熹
2014-06-01
wapper.line 遮罩层的设置 注意最后设置为0
截图
0赞 · 0采集
哼哼熹
2014-06-01
wapper.line 宽度是0的原因,是line只是虚线的存在
截图
0赞 · 0采集
哼哼熹
2014-06-01
mark2
截图
0赞 · 0采集
哼哼熹
2014-06-01
mark1
截图
0赞 · 0采集
newdays
2014-05-09
wrapper的写法,记录一下
截图
0赞 · 0采集
数据加载中...