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:
Contoh Kode Sumber
[www.downcodes.com] <div id="bungkus">
<div kelas="daftar">
<div kelas="daftar_judul"></div>
<ul kelas="daftar_pic"></ul>
<ul kelas="daftar_teks"></ul>
</div>
</div>
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:
Contoh Kode Sumber
[www.downcodes.com] daftar_judul
daftar_gambar
daftar_teks
Mari mulai menulis kode HTML secara detail:
Contoh Kode Sumber
[www.downcodes.com] <div id="bungkus">
<div kelas="daftar">
<div kelas="daftar_judul">
<h3>Saya suka 52css</h3>
<span><a href="#">Lainnya</a></span>
</div>
<ul kelas="daftar_gambar">
<li><a href="/u/info_img/2009-06/11/5394_quote.gif" /></a><span><a href="http://www.downcodes.com/">downcode .com</a></span></li>
<li><a href="/u/info_img/2009-06/11/7852_quote.gif" /></a><span><a href="http://www.downcodes.com/default.asp ?cateID=9">Contoh tata letak DivCSS</a></span></li>
<li><a href="/u/info_img/2009-06/11/8437_quote.gif" /></a><span><a href="http://www.downcodes.com/css_template/" >Unduh templat</a></span></li>
<li><a href="/u/info_img/2009-06/11/3408_quote.gif" /></a><span><a href="http://www.downcodes.com/default.asp ?cateID=3">Tutorial DivCSS</a></span></li>
</ul>
<div kelas="hapus"></div>
<ul kelas="daftar_teks">
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=813">Daftar definisi dl membuat daftar CSS dengan Elemen gambar dan teks</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=720">Contoh tata letak halaman web CSS: dengan yang sesuai Tag membuat tabel semantik</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=669">Contoh tata letak DivCSS: gambaran yang sangat praktis Daftar CSS teks campuran - kaya akan semantik</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=666">Contoh tata letak DivCSS menggunakan dl dt dd untuk Buatlah daftar</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=636">Contoh tata letak DivCSS: tiga baris dan satu kolom atas dan bawah Tinggi tetap adaptif</a></li>
</ul>
<div kelas="hapus"></div>
</div>
<div kelas="hapus"></div>
</div>
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:
Contoh Kode Sumber
[www.downcodes.com] * { margin:0; bantalan:0; ukuran font:12 piksel; warna:#666;
a{ warna:#666666; dekorasi teks: tidak ada;}
a:hover{ color:#2764b4; dekorasi teks:garis bawah;}
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)
Contoh Kode Sumber
[www.downcodes.com] #bungkus{ lebar:450px; margin:30px otomatis; batas:1px padat #e5f2f8;
.list{ lebar:448 piksel; batas:1 piksel padat #a4a4a4;}
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
Contoh Kode Sumber
[www.downcodes.com] .list_title{ lebar:426px; padding:0 10px; batas:1px padat #fff; latar belakang:#f2e9da; tinggi:22px;
.list_title h3{ float:kiri; lebar:300px;}
.list_title span{ float:kanan; lebar:60px; perataan teks:kanan;}
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;
Contoh Kode Sumber
[www.downcodes.com] .list_pic{lebar:433px; bantalan:15px 0 0 15px;}
.list_pic li{ tampilan:sebaris; float:kiri; lebar:94px; margin:0 14px 0 0;
.list_pic li img{ lebar:90 piksel; tinggi:70 piksel;}
.list_pic sebagai img{ border:2px solid #b3deee;}
.list_pic li a:hover img{border:2px solid #ccc;}
.list_pic li span{ tampilan:blok; lebar:94px; tinggi:20px; tinggi garis:22px;
.list_pic li menjangkau{ display:block;}
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;
Contoh Kode Sumber
[www.downcodes.com] .list_text{width:426px; margin:10px; padding:10px 0 0; batas atas:1px bertitik #2764b4 }
.list_text li{ float:kiri; lebar:100%;
.list_text li span{ float:kanan; perataan teks:kanan;}
Terakhir, hapus float: .clear{ clear:both;}
