フロントエンドのページ レイアウトとさまざまな効果は本当に素晴らしく、同社のデザイナーはすべてのフロントエンド レイアウトとスタイル効果を 1 つの Web サイトで使用するのが待ちきれません。
次のレイアウト効果を実現するにはどうすればよいですか?私はこのレイアウト効果に、小さな div レイアウトのカードスタッキングと呼ばれる名前を付けました。そこで Baidu で検索したところ、実際にこのスタッキング効果の実装があることを知りました。たとえば、jQuery と CSS3 のクールなスタッキング カードの拡張および縮小効果です。カード スタックについて Google で検索したところ、このカード スタック用エフェクトを見つけました。もちろん、上記の 2 つの URL に対する効果は比較的複雑ですが、次の効果が達成される限り、ここでのニーズは単純です。
これがコードです:
<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 class="box-content-title">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" src="../../asset/images/logo/obama-card196x172.jpg" alt=""> </div> </div>
これは実際には非常に単純です。.box.box の子要素は相対的に配置され、背景色を追加します。.box-content は通常どおりに配置され、幅によって制御されます。子要素の位置、 .box-img の絶対配置、right と top を使用して位置を制御すると、基本的に目的の効果を実現できます。