-
這一節沒聽懂，以后再看吧，源碼很簡單查看全部
-
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
提交
取消