-
超出的部分隐藏（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 表示透明度查看全部
-
改变某个元素的明暗度的实现方法：1.通过设置当前元素的透明度opacity、2.通过设置当前元素的background值 3.通过设置一个遮罩层的透明度来实现 4.通过设置当前元素的滤镜来实现查看全部
-
不错查看全部
-
这段没看懂。所以标记一下。查看全部
-
dom事件监听查看全部
-
不错的查看全部
-
这一节没听懂，以后再看吧，源码很简单查看全部
-
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)查看全部
举报
0/150
提交
取消