Artikel pemula: Cara menggunakan CSS untuk mencipta reka letak imej dan teks (perkongsian kod)-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

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

奋力向前

Sep 14, 2021 pm 05:43 PM

css

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.

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

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="/static/imghw/default1.png"  data-src="54545454.jpg"  class="lazy"    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="/static/imghw/default1.png"  data-src="54545454.jpg"  class="lazy"    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="/static/imghw/default1.png"  data-src="54545454.jpg"  class="lazy"    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>

Salin selepas log masuk

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;
			}

Salin selepas log masuk

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);
			}

Salin selepas log masuk

5 Pilih gaya pergerakan tetikus untuk pemilih hover.

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

Salin selepas log masuk

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;
			}

Salin selepas log masuk

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;

Salin selepas log masuk

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

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

Salin selepas log masuk

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年，大一下学期，开学我们第一次班级聚会，相聚在北海园博园假山，
						一起动手、齐力快乐的一起烧烤，虽然天色黑的伸手不见五指，让人害怕，但我们相聚在一起，
						有说有笑，彼此相知，却一点感觉不到害怕，那刻，仿佛时间停住了，只剩下快乐相伴。
					
				
			
			
			
				
					
				
				
					
						优秀班级评比
					
					
				
				
					
						还记得，大二上学期，一次晚点名辅导员说，每个班级要拍出最美的班级照，
						参加最美班级的摄影评比，我们大家一起在群里齐思广议，每个人把自己觉得好的想法分享出来，
						争取拍几张最美的班级照，很想说，我们大家认真付出的样子真的帅呆了。
					
				
			
			
			
				
					
				
				
					
						团日活动
					
				
				
					
						还记得，大二下学期，大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动，
						我们大家来到北海美丽的海滩公园，齐心志愿动手去捡垃圾，保护海滩，大家人认真捡着垃圾，
						看到旁边的人举起大拇指，感觉此刻值了。

Salin selepas log masuk

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!

Kenyataan Laman Web ini

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055612 gagal dipasang di Windows 10?

4 minggu yang lalu By DDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

3 minggu yang lalu By DDD

Nordhold: Sistem Fusion, dijelaskan

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Java

1675

Tutorial CakePHP

1429

Tutorial Laravel

1333

Tutorial PHP

1278

Tutorial C#

1257

Tunjukkan Lagi

Related knowledge

Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

See all articles