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.
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>
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
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
