Rumah > Artikel > hujung hadapan web > Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod)

Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod)

奋力向前asal: 2021-09-14 17:43:575846semak imbas

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan css untuk membuat tetapan sempadan jadual (dengan kod) ", saya memperkenalkan anda cara menggunakan css untuk membuat tetapan sempadan jadual. Artikel berikut akan memperkenalkan kepada anda cara menggunakan CSS untuk mencipta reka letak imej dan teks Mari kita lihat cara melakukannya.

Halaman web selalunya mempunyai reka letak imej dan teks seperti ini Mari saya kongsikan dengan anda dan lihat kesannya kami menerangkan proses asas susun atur teks imej css html.

Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod)

Terutamanya menggunakan atribut CSS visibility: hidden; untuk menyembunyikan teks label p dan kemudian menggunakan pemilih hover untuk menukar ketinggian kelas card dan tukar pteks Tag visibility: visible; dipaparkan.

1. Buat fail HTML baharu dan tentukan 3 tag div.

<body>

		<div class="container">
			<div class="card">
				<div class="img">
					<img  src="54545454.jpg"  alt="Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod)" >
					<!-- 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="Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod)" >
				</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="Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod)" >
				</div>
				<div class="top-text">
					<div class="name">
						团日活动
					</div>
				</div>
				<div class="bottom-text">
					<div class="text">
						还记得，大二下学期，大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动，
						我们大家来到北海美丽的海滩公园，齐心志愿动手去捡垃圾，保护海滩，大家人认真捡着垃圾，
						看到旁边的人举起大拇指，感觉此刻值了。
					</div>
				</div>
			</div>
		</div>
	</body>

2. Tetapkan div kotak class kepada container untuk mengelakkan penjajaran bawah yang berlaku semasa susun atur terapung.

3. Tambahkan tetapan gaya pada container: display: flexSusun letak fleksibel align-items: centerJajar di tengah sepanjang paksi menegak justify-content: leftJajar ke kiri dalam arah paksi.

<style type="text/css">
			.container{
				width: 100%;
				height: 500px;
				padding: 0px 40px;
				display: flex;
				align-items: center;
				justify-content: left;
			}

Kesan kod

Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod)

4. Tambahkan tetapan gaya pada card: transition tetikus atribut box-shadow tetapkan kesan bayang ;background-colorWarna latar belakang elemen atribut.

.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 Pilih gaya pergerakan tetikus untuk pemilih hover.

.card:hover{
				height:400px;
				box-shadow:5px 5px 10px rgba(0,0,0,0.2);
			}

6 Gunakan tag img untuk memproses lebar dan tinggi saiz imej, dan object-fit: cover potong imej untuk mengekalkan bahagian asal imej.

.card .img{
				height: 200px;
				width: 100%;
			}
			.card .img img{
				height: 100%;
				width: 100%;
				object-fit: cover;
			}

7 visibility: hidden;Sembunyikan teks label p dan tambah atribut transition pada tetikus.

.card .bottom-text{
				text-indent: 2em;
				padding: 0 20px 10px 20px;
				margin-top: 5px;
				 background-color: white;
				 visibility: hidden;
				 transition: 0.5s;

8 Gunakan pemilih hover untuk menukar ketinggian kelas card dan memaparkan teks label p. visibility: visible;

			.card:hover .bottom-text{
				opacity: 1;
				visibility: visible;

ok, selesai! !

Kod lengkap



	
		
		CSS图片文字排版
		<style type="text/css">
			.container{
				width: 100%;
				height: 500px;
				padding: 0px 40px;
				display: flex;
				align-items: center;
				justify-content: left;
			}
			.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);
			}
			.card:hover{
				height:400px;
				box-shadow:5px 5px 10px rgba(0,0,0,0.2);
			}
			.card .img{
				height: 200px;
				width: 100%;
			}
			.card .img img{
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
			.card .top-text{
				padding-top: 5px;
			}
			.card .top-text .name{
				font-size: 25px;
				font-weight:600;
				color: #202020;
			}
			.card .top-text p{
				font-size: 20px;
				font-weight:600;
				color: #e74c3c;
				line-height: 20px;
			}
			.card .bottom-text{
				text-indent: 2em;
				padding: 0 20px 10px 20px;
				margin-top: 5px;
				 background-color: white;
				 visibility: hidden;
				 transition: 0.5s;
			}
			.card:hover .bottom-text{
				opacity: 1;
				visibility: visible;
			}
			.card .bottom-text .text{
				text-align: justify;
			}
		
	
	
		
			
				
					
					
				
				
					
						第一次班级聚会
					
				
				
					
						还记的，2018年，大一下学期，开学我们第一次班级聚会，相聚在北海园博园假山，
						一起动手、齐力快乐的一起烧烤，虽然天色黑的伸手不见五指，让人害怕，但我们相聚在一起，
						有说有笑，彼此相知，却一点感觉不到害怕，那刻，仿佛时间停住了，只剩下快乐相伴。
					
				
			
			
			
				
					
				
				
					
						优秀班级评比
					
					
				
				
					
						还记得，大二上学期，一次晚点名辅导员说，每个班级要拍出最美的班级照，
						参加最美班级的摄影评比，我们大家一起在群里齐思广议，每个人把自己觉得好的想法分享出来，
						争取拍几张最美的班级照，很想说，我们大家认真付出的样子真的帅呆了。
					
				
			
			
			
				
					
				
				
					
						团日活动
					
				
				
					
						还记得，大二下学期，大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动，
						我们大家来到北海美丽的海滩公园，齐心志愿动手去捡垃圾，保护海滩，大家人认真捡着垃圾，
						看到旁边的人举起大拇指，感觉此刻值了。

Pembelajaran yang disyorkan:

Tutorial video CSS

Atas ialah kandungan terperinci Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html Object class 选择器 display background transition flex

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang unsur-unsur pseudo dalam CSS::before dan ::afterArtikel seterusnya：Penjelasan terperinci tentang unsur-unsur pseudo dalam CSS::before dan ::after

Artikel berkaitan

Lihat lagi