hujung hadapan webtutorial cssArtikel 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)
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="/static/imghwm/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/imghwm/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/imghwm/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>
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
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 lengkapPembelajaran yang disyorkan: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年，大一下学期，开学我们第一次班级聚会，相聚在北海园博园假山， 一起动手、齐力快乐的一起烧烤，虽然天色黑的伸手不见五指，让人害怕，但我们相聚在一起， 有说有笑，彼此相知，却一点感觉不到害怕，那刻，仿佛时间停住了，只剩下快乐相伴。优秀班级评比还记得，大二上学期，一次晚点名辅导员说，每个班级要拍出最美的班级照， 参加最美班级的摄影评比，我们大家一起在群里齐思广议，每个人把自己觉得好的想法分享出来， 争取拍几张最美的班级照，很想说，我们大家认真付出的样子真的帅呆了。团日活动还记得，大二下学期，大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动， 我们大家来到北海美丽的海滩公园，齐心志愿动手去捡垃圾，保护海滩，大家人认真捡着垃圾， 看到旁边的人举起大拇指，感觉此刻值了。
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!
Apakah grid CSS?Apr 30, 2025 pm 03:21 PMCSS Grid adalah alat yang berkuasa untuk mewujudkan susun atur web yang rumit dan responsif. Ia memudahkan reka bentuk, meningkatkan kebolehcapaian, dan menawarkan lebih banyak kawalan daripada kaedah yang lebih lama.
Apakah CSS Flexbox?Apr 30, 2025 pm 03:20 PMArtikel membincangkan CSS Flexbox, kaedah susun atur untuk penjajaran yang cekap dan pengedaran ruang dalam reka bentuk responsif. Ia menerangkan penggunaan Flexbox, membandingkannya dengan grid CSS, dan butiran sokongan penyemak imbas.
Bagaimanakah kita boleh membuat laman web kami responsif menggunakan CSS?Apr 30, 2025 pm 03:19 PMArtikel ini membincangkan teknik untuk membuat laman web responsif menggunakan CSS, termasuk tag Meta Viewport, grid fleksibel, media cecair, pertanyaan media, dan unit relatif. Ia juga meliputi menggunakan grid CSS dan Flexbox bersama -sama dan mengesyorkan rangka kerja CSS
Apakah harta saiz kotak CSS?Apr 30, 2025 pm 03:18 PMArtikel ini membincangkan harta saiz kotak CSS, yang mengawal bagaimana dimensi elemen dikira. Ia menerangkan nilai seperti kotak kandungan, kotak sempadan, dan kotak padding, dan kesannya terhadap reka bentuk susun atur dan penjajaran bentuk.
Bagaimanakah kita boleh menghidupkan CSS?Apr 30, 2025 pm 03:17 PMArtikel membincangkan membuat animasi menggunakan CSS, sifat utama, dan menggabungkan dengan JavaScript. Isu utama adalah keserasian penyemak imbas.
Bolehkah kita menambah transformasi 3D ke projek kami menggunakan CSS?Apr 30, 2025 pm 03:16 PMArtikel membincangkan menggunakan CSS untuk transformasi 3D, sifat utama, keserasian penyemak imbas, dan pertimbangan prestasi untuk projek web. (Kira -kira aksara: 159)
Bagaimana kita boleh menambah kecerunan dalam CSS?Apr 30, 2025 pm 03:15 PMArtikel ini membincangkan menggunakan kecerunan CSS (linear, radial, mengulangi) untuk meningkatkan visual laman web, menambah kedalaman, fokus, dan estetika moden.
Apakah unsur-unsur pseudo dalam CSS?Apr 30, 2025 pm 03:14 PMArtikel membincangkan unsur-unsur pseudo dalam CSS, penggunaannya dalam meningkatkan gaya HTML, dan perbezaan dari kelas pseudo. Menyediakan contoh praktikal.
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!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
