Contoh tutorial DivCSS: Daftar CSS campuran grafis dan teks dengan struktur atas dan bawah

Hari ini kita akan belajar bersama bagaimana membuat "daftar CSS dengan campuran grafis dan teks" yang sering digunakan. Pertama, analisis karakteristik daftar ini, lalu tulis kode HTML, dan terakhir terapkan gaya CSS untuk mencapai efek akhir.

Dampak dari contoh ini:


Penulis artikel ini: 52CSS.com Li Xiang Jika ingin mencetak ulang, harap membuat link ke situs ini (http://www.52css.com/), dan Anda tidak diperbolehkan mengubah isi artikel sesuka hati , dan simpan teks pernyataan hak cipta ini!
Bagian atas adalah nama kolom yang saya suka 52css dan lebih banyak lagi, lalu bagian bawah dibagi menjadi dua blok, satu menampilkan gambar mini, dan yang lainnya menampilkan tautan teks, keduanya dapat dicapai melalui ul+li. Dengan analisis di atas, mulailah pengkodean HTML berikut:


Masukkan semua elemen ke dalam layer dengan id wrap, dan atur warna tepinya ke #e5f2f8. Hal ini untuk membuatnya terlihat seperti memiliki efek bayangan.
Kemudian buatlah daftar layer di dalamnya, dan buatlah tiga layer di dalam daftar tersebut, yaitu:


Mari mulai menulis kode HTML secara detail:


Float h3 ke kiri pada layer list_title untuk membuat judul, float ke kanan untuk membuat lebih banyak koneksi, dan buat gambar ul+li yang tersisa mengambang di layer list_pic;
Buat ul+li di layer list_text untuk membuat daftar berita;
Di bagian paling bawah, tempatkan lapisan dengan class clear untuk membersihkan pelampung.

Dengan landasan di atas, mulailah pengkodean CSS berikut:
Pernyataan keseluruhan:

Atur gaya bungkus seluruh lapisan, lebarnya 450px, margin atas dan bawah 30px, sisi kiri dan kanan disejajarkan secara horizontal, dan batasnya diatur menjadi biru (di sini untuk meningkatkan efek bayangan)


Definisi gaya bagian judul list_title:
Atur lebar menjadi 426px, padding atas dan bawah menjadi 0, dan margin kiri dan kanan menjadi 10px
Elemen nama kolom h3 melayang ke kiri; lebarnya 300 piksel;
Atur elemen span agar melayang ke kanan dengan lebar 60px; ratakan teks ke kanan dan atur tautannya


Definisi gaya lapisan gambar list_pic:
Pertama, gunakan daftar ul dan atur lebarnya menjadi 433px;
Yang perlu diperhatikan adalah setting padding: padding:15px 0 0 15px;
(Alasan mengapa margin dalam kanan disetel ke 0 adalah karena masalah spasi li, yang meningkatkan kinerja halaman. Anda juga dapat menyetelnya ke: padding: 15px 15px 0 15px; efek kontras)
li mengatur ukuran blok gambar menjadi 94px, dan margin spasi: 0 14px 0 0;
Warna tepi gambar berubah dari biru menjadi abu-abu saat mouse diarahkan;

Setel gaya teks tautan,
Ubah rentang menjadi elemen blok. Tautan dalam rentang juga diubah menjadi elemen blok, dan lebar serta tinggi masing-masing diatur ke 94px dan 20px; spasi baris diatur ke 20px;


Definisi gaya lapisan teks list_text:
Tentukan daftar berita melalui ul+li. Perlu dicatat bahwa rentang waktu melayang ke kanan, dan teks ditulis di batas atas dengan garis putus-putus biru di sebelah kanan, dan margin atas diatur ke 10px;


Terakhir, hapus float: .clear{ clear:both;}