亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

手風琴效果

難度初級
時長35分
學習人數
綜合評分9.43
122人評價 查看評價
9.8 內容實用
9.3 簡潔易懂
9.2 邏輯清晰
  • 這一節沒聽懂,以后再看吧,源碼很簡單
    查看全部
  • 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;
    查看全部
    0 采集 收起 來源:實戰題

    2016-11-03

  • 元素的明暗度是通過控制遮罩層的透明度實現的。 .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>
    查看全部
    0 采集 收起 來源:實戰題

    2018-03-22

  • 超出的部分隱藏(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
    查看全部
    0 采集 收起 來源:練習題

    2016-10-06

  • haha
    查看全部
    0 采集 收起 來源:實戰題

    2016-09-08

  • 1111
    查看全部
    0 采集 收起 來源:實戰題

    2016-08-31

  • 之前想到將整個大容器添加一個遮罩層的思想是錯誤的,當鼠標懸停,大容器的遮罩層的透明度不為0,即便此時對單列表容器的遮罩層設置透明度也無法消除大容器的遮罩層所帶來的影響,正確的做法應該是,對每個列表使用遮罩層,在鼠標懸停時: .wrap:hover .mask{opacity:0.15} .wrap:hover .mask:hover{opacity:0} 這樣做就不會出現疊加效應,因為都是對一個樣式進行的設置,這里還要對比權值
    查看全部
    0 采集 收起 來源:實戰題

    2016-08-29

舉報

0/150
提交
取消
課程須知
1.HTML中無序列表的相關知識 2.掌握CSS樣式的內容,尤其是CSS3的基礎內容 3.對JavaScript中鼠標事件等知識熟悉
老師告訴你能學到什么?
1.浮動布局的相關知識 2.掌握CSS3的transition屬性 3.會用代碼實現手風琴效果

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!