-
這一節(jié)沒聽懂，以后再看吧，源碼很簡單查看全部
-
xxxxxxxxxxxx查看全部
-
手風(fēng)琴查看全部
-
ui樣式調(diào)整查看全部
-
<!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>手風(fēng)琴效果</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;} /*當(dāng)前列表項懸停遮罩層消失*/ .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;查看全部
-
元素的明暗度是通過控制遮罩層的透明度實現(xiàn)的。 .wrapper:hover .mask{opacity:0.15;} 鼠標(biāo)懸停的列表項：.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透明度 【虛線的實現(xiàn)方法】 .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;查看全部
-
斜體標(biāo)簽<i> 關(guān)于relative和absolute的共用，如果元素使用absolute定位，那么其參照物是body容器，而不是其父容器，但是一旦給其父容器添加relative屬性其參照物就成了父容器查看全部
-
1.浮動布局 2.遮罩層 透明度 3.動畫 方法：1.JavaScript 屬性值 2.css3-transition 過渡 4.鼠標(biāo)事件 懸停監(jiān)聽 onmouseover查看全部
-
ghghg查看全部
-
haha查看全部
-
1111查看全部
-
之前想到將整個大容器添加一個遮罩層的思想是錯誤的，當(dāng)鼠標(biāo)懸停，大容器的遮罩層的透明度不為0，即便此時對單列表容器的遮罩層設(shè)置透明度也無法消除大容器的遮罩層所帶來的影響，正確的做法應(yīng)該是，對每個列表使用遮罩層，在鼠標(biāo)懸停時: .wrap:hover .mask{opacity:0.15} .wrap:hover .mask:hover{opacity:0} 這樣做就不會出現(xiàn)疊加效應(yīng)，因為都是對一個樣式進(jìn)行的設(shè)置，這里還要對比權(quán)值查看全部
舉報
0/150
提交
取消