简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

初心者向け記事: CSS を使用して画像とテキストのレイアウトを作成する方法 (コード共有)

奋力向前
リリース： 2021-09-14 17:47:27
オリジナル
5827 人が閲覧しました

前回の記事「cssを使って表の枠線設定効果を作る方法をステップバイステップで教えます(コード付き)」では、cssを使って表の枠線設定を作成する方法を紹介しました。効果。次の記事ではCSSを使って画像や文字のレイアウトを作成する方法を紹介しますので、やり方を見ていきましょう。

初心者向け記事: CSS を使用して画像とテキストのレイアウトを作成する方法 (コード共有)

Web ページにはこのような CSS 画像やテキストのレイアウトがよくあります。レンダリングを共有してその効果を確認しましょう。それを実現する方法を検討しましょう。 html css画像テキストレイアウトの基本的な処理を説明します。

初心者向け記事: CSS を使用して画像とテキストのレイアウトを作成する方法 (コード共有)

主に CSS 属性を使用しますvisibility: hidden;p ラベル テキストを非表示にして、hover## を使用しますクラス card の高さを変更し、p ラベル テキスト visibility:visible; を表示する #セレクター。

1. まず、新しい HTML ファイルを作成し、3 つの

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>
ログイン後にコピー


2.

div ボックスの class は、フローティング レイアウトを避けるために container に設定されています。 . 底が揃っていません。

3. スタイル設定を

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;
			}
ログイン後にコピー

コード効果

初心者向け記事: CSS を使用して画像とテキストのレイアウトを作成する方法 (コード共有)

4. スタイル設定を

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 サイトの他の関連記事を参照してください。

関連ラベル：
css
ソース：php.cn
前の記事：CSS::before と ::after の疑似要素の詳細な説明 次の記事：中秋節のギフトとして、CSS の太陽、地球、月の革命アニメーション効果を共有してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！