ホームページ >ウェブフロントエンド >CSSチュートリアル >初心者向け記事: CSS を使用して画像とテキストのレイアウトを作成する方法 (コード共有)
初心者向け記事: CSS を使用して画像とテキストのレイアウトを作成する方法 (コード共有)
- 奋力向前オリジナル
- 2021-09-14 17:43:575915ブラウズ
前回の記事「cssを使って表の枠線設定効果を作る方法をステップバイステップで教えます(コード付き)」では、cssを使って表の枠線設定を作成する方法を紹介しました。効果。次の記事ではCSSを使って画像や文字のレイアウトを作成する方法を紹介しますので、やり方を見ていきましょう。
Web ページにはこのような CSS 画像やテキストのレイアウトがよくあります。レンダリングを共有してその効果を確認しましょう。それを実現する方法を検討しましょう。 html css画像テキストレイアウトの基本的な処理を説明します。
主に CSS 属性を使用しますvisibility: hidden;p ラベル テキストを非表示にして、hover## を使用しますクラス card の高さを変更し、p ラベル テキスト visibility:visible; を表示する #セレクター。
div タグを定義します。
<body> <div class="container"> <div class="card"> <div class="img"> <img src="54545454.jpg" alt="初心者向け記事: CSS を使用して画像とテキストのレイアウトを作成する方法 (コード共有)" > <!-- one --> </div> <div class="top-text"> <div class="name"> 第一次班级聚会 </div> </div> <div class="bottom-text"> <div class="text"> 还记的，2018年，大一下学期，开学我们第一次班级聚会，相聚在北海园博园假山， 一起动手、齐力快乐的一起烧烤，虽然天色黑的伸手不见五指，让人害怕，但我们相聚在一起， 有说有笑，彼此相知，却一点感觉不到害怕，那刻，仿佛时间停住了，只剩下快乐相伴。 </div> </div> </div> <!-- two --> <div class="card"> <div class="img"> <img src="54545454.jpg" alt="初心者向け記事: CSS を使用して画像とテキストのレイアウトを作成する方法 (コード共有)" > </div> <div class="top-text"> <div class="name"> 优秀班级评比 </div> <!-- <p>Apps Developer</p> --> </div> <div class="bottom-text"> <div class="text"> 还记得，大二上学期，一次晚点名辅导员说，每个班级要拍出最美的班级照， 参加最美班级的摄影评比，我们大家一起在群里齐思广议，每个人把自己觉得好的想法分享出来， 争取拍几张最美的班级照，很想说，我们大家认真付出的样子真的帅呆了。 </div> </div> </div> <!-- three --> <div class="card"> <div class="img"> <img src="54545454.jpg" alt="初心者向け記事: CSS を使用して画像とテキストのレイアウトを作成する方法 (コード共有)" > </div> <div class="top-text"> <div class="name"> 团日活动 </div> </div> <div class="bottom-text"> <div class="text"> 还记得，大二下学期，大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动， 我们大家来到北海美丽的海滩公园，齐心志愿动手去捡垃圾，保护海滩，大家人认真捡着垃圾， 看到旁边的人举起大拇指，感觉此刻值了。 </div> </div> </div> </div> </body>
div ボックスの class は、フローティング レイアウトを避けるために container に設定されています。 . 底が揃っていません。
container に追加します: display: flexFlexible Layout; align-items: center垂直方向に沿って中央に揃えますaxis;justify-content: left 軸の方向を左に揃えるだけです。
<style type="text/css">
.container{
width: 100%;
height: 500px;
padding: 0px 40px;
display: flex;
align-items: center;
justify-content: left;
}コード効果
card に追加します: transition 属性マウスオーバー; box-shadowシャドウ効果を設定します; background-colorアトリビュート エレメントの背景色。
.card{
height: 270px;
max-width: 350px;
margin: 0px 20px;
background-color: white;
transition: 0.4s;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}5. hover セレクターのマウス移動スタイルを選択します。
.card:hover{
height:400px;
box-shadow:5px 5px 10px rgba(0,0,0,0.2);
}6. img タグを使用して画像サイズの幅と高さを処理し、object-fit: cover を使用して画像を切り取り、元の比率を保持します。画像。
.card .img{
height: 200px;
width: 100%;
}
.card .img img{
height: 100%;
width: 100%;
object-fit: cover;
}7, visibility: hidden;p ラベル テキストを非表示にし、マウスオーバーで transition 属性を追加します。
.card .bottom-text{
text-indent: 2em;
padding: 0 20px 10px 20px;
margin-top: 5px;
background-color: white;
visibility: hidden;
transition: 0.5s;8、クラス card の高さを変更する hover セレクター、および plabel textvisibility:visible;## ＃画面。 rreeeeわかりました、完了しました! ！
完全なコード
.card:hover .bottom-text{
opacity: 1;
visibility: visible;推奨学習:
CSSビデオチュートリアル以上が初心者向け記事: CSS を使用して画像とテキストのレイアウトを作成する方法 (コード共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。