-
这一节没听懂，以后再看吧，源码很简单查看全部
-
xxxxxxxxxxxx查看全部
-
手风琴查看全部
-
ui样式调整查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>手风琴效果</title> <link href="css/05index.css" type="text/css" rel="stylesheet"/> <link href="css/reset.css" type="text/css" rel="stylesheet"/> <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script></script> </head> <body> <div class="wrapper" id="subject"> <ul> <li class="big"> <a href="#"> <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg"> <div class="info"> <h3 >聚美妆</h3> <p>聚美妆1/2周年庆</p> <p class="price"><strong>1</strong><i>折起</i></p> </div> <i class="line"></i> </body> </html>查看全部
-
body,ul,li,p,h3 {margin: 0;padding: 0} ul,ol {list-style: none;} /*外框*/ .wrapper{ height:128px; border:1px solid #d3d3d3;} /*动画效果*/ .wrapper ul *{ transition:all .1s linear;} .wrapper li{ width:156px; height:128px; float:left; overflow:hidden;} .wrapper li a{ width:156px; height:128px; display:block; position:relative; cursor:pointer; text-decoration:none; overflow:hidden;} /*当前列表项悬停遮罩层消失*/ .wrapper li a:hover .mask{ opacity:0;} .wrapper li img{ height:72px; width:117px; position:absolute; bottom:0; right:-15px;} .wrapper li .line{ height:128px; width:0; font-size:0; border-right:1px dashed #cacaca; position:absolute; right:0; top:4px;} .wrapper li .info{ position:absolute; top:0; left:0; width:136px; padding:4px 10px;} .wrapper li .info h3{ font-size:14px; font-weight:700;} .wrapper li .info p{ color:#868686; font-size:12px; overflow:hidden; width:136px; height:22px; line-height:22px;} .wrapper li .info p.price{ font-size:14px; font-style:italic; color:#fa2a5d;查看全部
-
元素的明暗度是通过控制遮罩层的透明度实现的。 .wrapper:hover .mask{opacity:0.15;} 鼠标悬停的列表项：.wrapper li.big a:hover .mask{opacity:0;}查看全部
-
<!doctype html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="subject" class="wrapper"> <ul> <li class="big"> <a href="#link1"> <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg"> <div class="info"> <h3 >聚美妆</h3> <p>聚美妆1/2周年庆</p> <p class="price"><strong>1</strong><i>折起</i></p> </div> <s class="line"></s> <i class="mask"></i> </a> </li>查看全部
-
超出的部分隐藏（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;查看全部
-
斜体标签<i> 关于relative和absolute的共用，如果元素使用absolute定位，那么其参照物是body容器，而不是其父容器，但是一旦给其父容器添加relative属性其参照物就成了父容器查看全部
-
1.浮动布局 2.遮罩层 透明度 3.动画 方法：1.JavaScript 属性值 2.css3-transition 过渡 4.鼠标事件 悬停监听 onmouseover查看全部
-
ghghg查看全部
-
haha查看全部
-
1111查看全部
-
之前想到将整个大容器添加一个遮罩层的思想是错误的，当鼠标悬停，大容器的遮罩层的透明度不为0，即便此时对单列表容器的遮罩层设置透明度也无法消除大容器的遮罩层所带来的影响，正确的做法应该是，对每个列表使用遮罩层，在鼠标悬停时: .wrap:hover .mask{opacity:0.15} .wrap:hover .mask:hover{opacity:0} 这样做就不会出现叠加效应，因为都是对一个样式进行的设置，这里还要对比权值查看全部
举报
0/150
提交
取消