目錄
小div佈局之卡片堆疊(card-stacking)
Nov 21, 2016 pm 01:31 PM
css
前端的頁面佈局和各種效果真是讓人眼花撩亂,公司的設計師恨不得在一個網站上把前端的佈局和樣式效果都用一遍。
如何實現下面這種佈局效果?我給這種版面效果取了個名字,叫做小div版面之卡片堆疊。然後我百度了下,還真有這種堆疊效果的實現,像這個例如這個:jQuery和CSS3酷炫堆疊卡片展開和收縮特效。 google下card stacking,發現了個這個Effects for Card Stacks。當然,上面兩個網址上的效果都比較複雜,我這裡的需求簡單,只要實現下面的效果就好。
話不多說,上代碼:
<style> .container { margin: 50px auto; width: 328px; } .box { background: #f7f7f7; position: relative; } .box-content { padding: 20px; width: 70%; } .box-content-title { margin: 0 0 10px; } .box-content-desc { -webkit-box-orient: vertical; color: #333; display: -webkit-box; font-size: 14px; line-height: 1.5; -webkit-line-clamp: 4; margin-bottom: 30px; overflow: hidden; text-overflow: ellipsis; } .box-content-link { color: #006ec8; font-size: 14px; text-decoration: none; } .box-content-link:hover { text-decoration: none; } .box-img { position: absolute; right: -38%; top: 20px; } </style> <div class="container"> <div class="box"> <div class="box-content"> <h5 id="A公司">A公司</h5> <div class="box-content-desc">A公司是B公司的重要战略伙伴,致力于为C行业提供一站式 解决方案,目前处于高速发展期。公司旗下有四个事业部,业务主要涵盖以下三个方面,2016年公司 年营业额达到100万元。 </div> <a class="box-content-link" href="javascript:void(0);">查看 >></a> </div> <img class="box-img lazy" src="/static/imghw/default1.png" data-src="../../asset/images/logo/obama-card196x172.jpg" alt=""> </div> </div>
登入後複製
說來其實很簡單,.box的子元素.box相對定位,加上背景色;.box-content正常排布,用width和padding來控制其子元素的位置;.box-img絕對定位,用right和top來控制位置,基本上就可以達到所要的效果。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)