前端的頁面布局和各種效果真是讓人眼花繚亂，公司的設(shè)計(jì)師恨不得在一個(gè)網(wǎng)站上把前端的布局和樣式效果都用一遍。
如何實(shí)現(xiàn)下面這種布局效果？我給這種布局效果起了個(gè)名字，叫做小div布局之卡片堆疊。然后我百度了下，
還真有這種堆疊效果的實(shí)現(xiàn)，比如這個(gè)比如這個(gè)：jQuery和CSS3炫酷堆疊卡片展開和收縮特效。
google下card stacking，發(fā)現(xiàn)了個(gè)這個(gè)Effects for Card Stacks。當(dāng)然，
上面兩個(gè)網(wǎng)址上的效果都比較復(fù)雜，我這里的需求簡(jiǎn)單，只要實(shí)現(xiàn)下面的效果就好。
話不多說，上代碼：
1 <style> 2 .container { 3 margin: 50px auto; 4 width: 328px; 5 } 6 7 .box { 8 background: #f7f7f7; 9 position: relative; 10 } 11 12 .box-content { 13 padding: 20px; 14 width: 70%; 15 } 16 17 .box-content-title { 18 margin: 0 0 10px; 19 } 20 21 .box-content-desc { 22 -webkit-box-orient: vertical; 23 color: #333; 24 display: -webkit-box; 25 font-size: 14px; 26 line-height: 1.5; 27 -webkit-line-clamp: 4; 28 margin-bottom: 30px; 29 overflow: hidden; 30 text-overflow: ellipsis; 31 } 32 33 .box-content-link { 34 color: #006ec8; 35 font-size: 14px; 36 text-decoration: none; 37 } 38 39 .box-content-link:hover { 40 text-decoration: none; 41 } 42 43 .box-img { 44 position: absolute; 45 right: -38%; 46 top: 20px; 47 } 48 </style> 49 <div class="container"> 50 <div class="box"> 51 <div class="box-content"> 52 <h5 class="box-content-title">A公司</h5> 53 <div class="box-content-desc">A公司是B公司的重要戰(zhàn)略伙伴，致力于為C行業(yè)提供一站式
解決方案，目前處于高速發(fā)展期。公司旗下有四個(gè)事業(yè)部，
業(yè)務(wù)主要涵蓋以下三個(gè)方面，2016年公司 年?duì)I業(yè)額達(dá)到100萬元。 54 </div> 55 <a class="box-content-link" href="javascript:void(0);">查看 >></a> 56 </div> 57 <img class="box-img" src="../../asset/images/logo/obama-card196x172.jpg" alt=""> 58 </div> 59 </div>
說來其實(shí)很簡(jiǎn)單，.box的子元素.box相對(duì)定位，加背景色；.box-content正常排布，
用width和padding來控制其子元素的位置；.box-img絕對(duì)定位，用right和top來控制位置，
基本就可以實(shí)現(xiàn)所要的效果。
【 微信掃一掃 】
