您好,登錄后才能下訂單哦!
小編給大家分享一下CSS3如何實(shí)現(xiàn)網(wǎng)站商品展示效果圖,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
html代碼
<div class="product"> <ul> <li> <div class="pro-img"> <a href="#"> <img src="images/pms_1524883847.49276938!220x220.jpg" alt=""> </a> </div> <h4><a href="#">小米電視4A 43英寸青春版</a></h4> <p class="desc">全高清屏 / 人工智能語音</p> <p class="price"> <span>1499</span>元 <del>1699</del> </p> <div class="review"> <a href="#"> <span class="msg">一如既往的好,小米情懷</span> <span class="auther"> 來自于 驚喜 的評價(jià) </span> </a> </div> </li> </ul> </div>
CSS3代碼
* { margin: 0; padding: 0; } ul, ol { list-style: none; } input, button { outline: none; border: none; } a { text-decoration: none; } .clearfix::before, .clearfix::after { content: ""; height: 0; line-height: 0; display: block; visibility: hidden; } .clearfix::after { clear: both; } body { padding: 100px; background-color: #f5f5f5; } .product li { float: left; width: 234px; height: 246px; padding: 34px 0 20px; z-index: 1; margin-left: 14px; margin-bottom: 14px; background: #fff; -webkit-transition: all .2s linear; transition: all .2s linear; position: relative; } .pro-img { width: 150px; height: 150px; margin: 0 auto 18px; } .pro-img a { width: 100%; height: 100%; } .pro-img img { display: block; width: 100%; height: 100%; } .product li h4 { margin: 0 10px; font-size: 14px; font-weight: 400; text-align: center; } .product li h4 a { color: #333; } .desc { margin: 0 10px 10px; height: 18px; font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #b0b0b0; } .price { font-size: 14px; margin: 0 10px 10px; text-align: center; color: #ff6700; } .price del { color: #b0b0b0; } .review { position: absolute; bottom: 0; left: 0; z-index: 3; width: 234px; height: 0; overflow: hidden; font-size: 12px; background: #ff6700; opacity: 0; -webkit-transition: all .2s linear; transition: all .2s linear; } .review a { color: #757575; display: block; padding: 8px 30px; outline: 0; } .review a span { display: block; margin-bottom: 5px; color: #fff; } .product li:hover { -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1); box-shadow: 0 15px 30px rgba(0,0,0,0.1); -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0); } .product li:hover .review { opacity: 1; height: 76px; }
運(yùn)行效果圖:
以上是“CSS3如何實(shí)現(xiàn)網(wǎng)站商品展示效果圖”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。