Daftar Tag Ul, OL, DL: Masalah kompatibilitas untuk browser yang berbeda

Pengantar Artikel Produksi Halaman Web: Penelitian dan Aplikasi Elemen Daftar HTML CSS UL, OL, DL.

Elemen daftar HTML (seperti OL, UL, DL) banyak digunakan dalam pengembangan dan produksi situs web saat ini, tetapi pengiringnya berbeda di browser yang berbeda. Artikel ini menganalisis karakteristik dasar dari elemen daftar ini, berbagai masalah kompatibilitas di berbagai browser, dan memperkenalkan beberapa aplikasi umum.

Seharusnya bermanfaat bagi pemula atau mereka yang memiliki pengalaman di CSS.

Daftar yang tidak dipesan adalah daftar yang paling umum digunakan. Gambar berikut menunjukkan tampilan daftar yang tidak dipesan di browser yang berbeda:

halaman demo

Seperti yang ditunjukkan di atas, pengaturan default daftar yang tidak tertib di bawah browser yang berbeda sedikit berbeda. Tentu saja, ada beberapa daftar yang tidak dipesan yang tidak dimodifikasi dalam proyek situs web yang sebenarnya hari ini. Salah satu alasannya adalah reset CSS, yang telah menghapus peluru daftar default, margin, atau padding untuk daftar yang tidak teratur.

Beberapa properti CSS spesifik dari daftar yang tidak dipesan adalah tipe gaya-gaya, posisi gaya daftar, dan gambar gaya-daftar. Properti ini mengatur jenis peluru daftar, lokasi tag, dan penggunaan gambar, bukan tag. Tiga properti ini dapat digabungkan dengan gaya daftar.

Atribut tipe gaya-gaya dapat diatur ke beberapa nilai yang berbeda. Bagan berikut menunjukkan efek halaman dari beberapa nilai:

Bergantung pada browser dan sistem operasi pengguna, beberapa nilai daftar-gaya-item mungkin tidak ditampilkan dengan benar, dan biasanya default ke nilai desimal. Tidak disarankan untuk menggunakan daftar yang tidak perlu untuk menambah nilainya, karena semantik dari daftar yang tidak tertib itu sendiri tidak ada lagi.

Posisi gaya daftar dapat diatur ke luar (default) atau di dalam untuk posisi tag daftar. Jika gambar gaya-gaya diatur, itu juga akan mempengaruhi lokasi gambar.

Atribut gaya-gambar daftar dapat memberikan daftar kinerja unik yang tidak tertib. Sayangnya, menggunakan metode ini untuk menambahkan nomor proyek di IE adalah banyak bug, jadi jarang digunakan. Solusi yang lebih baik adalah menambahkan gambar latar belakang ke elemen LI dari daftar, dan menyesuaikan lokasi gambar latar belakang yang sesuai dan diatur ke No-Repeat. Di maxdesign.com, metode ini telah ditunjukkan melalui penjelasan langkah demi langkah dan bekerja dengan baik di semua browser.

Daftar yang dipesan digunakan ketika nilai tambahan diperlukan di depan setiap item daftar item daftar (mis. 1, 2, 3, dll.). Jenis daftar jenis daftar gaya dari daftar yang dipesan dapat diatur ke nilai apa pun yang dapat diatur dalam daftar yang tidak dipesan. Dalam kebanyakan kasus, daftar yang dipesan didahului oleh nilai tambahan atau tidak didahului oleh tanda apa pun. Tidak disarankan untuk menggunakan daftar yang dipesan untuk mencapai perilaku yang mirip dengan daftar yang tidak dipesan. Karena itu, semantik dari daftar yang dipesan itu sendiri tidak lagi benar.

Daftar definisi digunakan untuk menandai item daftar yang ditentukan, yang mencakup judul definisi (DT) dan definisi itu sendiri (DD). Tidak perlu mencocokkan persis saat mendefinisikan item daftar, kode berikut ini sepenuhnya legal di bawah XHTML yang ketat:

<dl> <dt> musik nirkabel miguhui </dt> <dt> konferensi kopenhagen </dt> <dd> "pengepungan Oktober" </dd> </ll>

Dengan cara ini Anda dapat menggunakan beberapa DTS di bawah satu DD, atau beberapa DD di bawah satu DT.

Tentukan tampilan visual daftar. Secara default, tampilan masing -masing browser hampir sama seperti yang ditunjukkan pada gambar di bawah ini:

halaman demo

Kode HTML yang sesuai dengan gambar di atas adalah sebagai berikut:

<dl> <dt>Title</dt> <dd>Here is the definition</dd> </dl> <dl> <dt>Popular movies</dt> <dd>October siege</dd> <dd>Taoling</dd> <dd>Three guns to slap the table</dd> <dd>Avatar</dd> </dl> <dl> <dt>Hot Topik </dt> <dd> Pasar Saham </dd> <dd> Harga rumah </dd> <dd> Hari Tahun Baru </dd> <dd> Cao Cao's Tomb </dd> </ll> 4. Daftar Obsolete: Menu & DIR

<u menu> dan <Red> elemen, secara teknis, juga dapat disebut daftar HTML, tetapi mereka sudah ketinggalan zaman dalam xhtml, sehingga tidak dibahas secara rinci di sini.

Dalam HTML, daftar yang tidak berurutan pada dasarnya tetap sama, meskipun tampaknya sekarang hanya disebut daftar, dan elemen baru akan digunakan untuk membungkus daftar sebagai navigasi.

Elemen OL memiliki sedikit perubahan, dan memperoleh dua properti baru: terbalik, yang merupakan nilai boolean untuk menunjukkan apakah daftar naik atau turun; Mulai, yang merupakan bilangan bulat untuk mendeklarasikan titik awal dari daftar yang dipesan.

Selain itu, elemen <figure> dan <letails> akan ditambahkan, dan mereka akan memiliki elemen anak, termasuk elemen <dt> dan <dd>.

Untuk informasi lebih lanjut tentang HTML5, silakan merujuk ke artikel ini tentang Taobao Kongyan yang mengungkapkan HTML5 dan CSS3 [geng teh susu BaiBiao]. Selain itu, Anda juga dapat mengklik di sini untuk melihat PPT online.

Berikut ini adalah beberapa perbedaan browser yang umum dan jelas.

Di bawah Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3, dan Safari, menambahkan tampilan: Blok akan menyebabkan jumlah item elemen Li dalam daftar yang dipesan atau tidak dipesan untuk menghilang.

Tapi di bawah IE6 dan IE7, menambahkan tampilan: Blok Bullet masih ada:

halaman demo

Di bawah IE6 dan IE7, menambahkan float: kiri ke daftar item (tidak ada gaya lain) yang akan membuat item daftar yang disejajarkan secara horizontal saat peluru (atau nomor item) menghilang. Seperti yang ditunjukkan pada gambar di bawah ini, dipotong dari browser IE7

Di bawah IE8 dan semua browser lainnya, item daftar selaras secara horizontal, tetapi peluru (atau nomor proyek) masih terlihat.

halaman demo

Ketika item daftar mengapung, kita harus mengingat titik kunci lain, yaitu, wadah daftar (elemen UL) akan mati ketika hanya ada elemen mengambang di dalamnya. Ini akan terjadi dengan cara yang sama di semua browser. Menambahkan overflow: Tersembunyi adalah salah satu solusi untuk masalah ini.

Untuk mencapai float yang sama: efek kiri di browser yang berbeda, cara terbaik adalah dengan menggunakan tampilan: inline.

Di bawah IE6 dan IE7, jika item daftar dalam daftar yang dipesan memiliki tata letak, nilai daftar yang dipesan tidak akan meningkat dan akan ditampilkan sebagai 1, seperti yang ditunjukkan pada gambar di bawah ini:

halaman demo

Properti haslayout tidak dapat diatur secara langsung, tetapi jika suatu elemen diatur untuk memiliki lebar, tinggi, mengambang, posisi absolut, menunggu akan mengubah haslayout.

Di sebagian besar browser, untuk menghapus peluru atau nomor proyek dan untuk menyelaraskan sisi kiri konten, Anda perlu mengatur bantalan kiri ke 0, tetapi ini tidak berfungsi di IE6 dan IE7. Di IE6 dan 7, Anda harus mengatur margin kiri ke 0 dan menggantinya. Lihat gambar di bawah ini:

halaman demo

Untuk menghindari masalah saat menangani gaya daftar di bawah browser yang berbeda, cara terbaik adalah dengan menggunakan reset CSS yang disebutkan di atas. Reset CSS dapat mengatur hampir semua perbedaan pengaturan default di browser dan memungkinkan semua browser bekerja dengan dasar yang sama. Meskipun masih ada perbedaan dalam beberapa gaya, mereka tidak akan diperlakukan sebagai poin yang sulit.

Juga, seperti yang disebutkan sebelumnya, yang terbaik adalah menghindari penggunaan properti gambar-gaya-gaya sama sekali dan sebaliknya menetapkan latar belakang, solusi simbolis khusus untuk daftar silang, daftar yang tidak dipelihara tidak dipelihara.

Sejauh ini, penggunaan yang paling umum dari daftar yang tidak tertib adalah bilah navigasi, baik horizontal atau vertikal. Karena tata letak berbasis tabel telah menjadi usang, daftar yang tidak berurutan telah banyak digunakan sebagai dasar untuk elemen navigasi, untuk alasan berikut:

• Daftar yang tidak tertib milik elemen level blok dan tidak perlu membungkus div di luar untuk menerapkan latar belakang atau ekstensi grafis lainnya.

• Ketika gaya dinonaktifkan, gaya daftar akan diturunkan dengan tenang, mempertahankan gaya aslinya, yang dapat memastikan bahwa item navigasi berbeda dari konten lain pada halaman.

• Meskipun daftar yang tidak teratur bukan hanya daftar sederhana, menambahkan elemen seperti tag <a>, elemen <li> tambahan akan membuat bilah navigasi mengekspresikan dalam bentuk yang lebih fleksibel.

• Navigasi dibagi menjadi daftar dan/atau sublist, memungkinkan penggunaan teknologi tambahan (seperti pembaca layar) yang dapat dengan mudah dilewati seluruh bilah navigasi.

Misalnya: menu efek khusus Lavalamp diimplementasikan menggunakan jQuery

Misalnya, contoh menu tarik-turun yang saya buat beberapa waktu lalu: jQuery menggunakan Slidetoggle untuk mengimplementasikan menu drop-down vertikal

Efek demo

HTML List Tag Ul, Li menyediakan cara yang efektif untuk menampilkan daftar foto untuk alasan yang sama seperti yang disebutkan di atas di bilah navigasi. Di bawah ini adalah beberapa galeri foto atau komponen tampilan foto berdasarkan tag HTML.

jcarousel

JCAROUSEL Foto Switching Transmisi JQuery Plug-in menyediakan fungsi jQuery yang dapat disesuaikan, menggunakan daftar yang tidak dipesan, dan dapat menampilkan efek transmisi dengan berbagai cara. Saya telah menerjemahkan plugin ini ke dalam bahasa Cina, Anda dapat mengklik di sini dengan kasar: beranda demo Cina jcarousel

Innerfade - JQuery

Plug-in InnerFade dapat mengaktifkan konten bentuk daftar apa pun untuk memudar masuk dan keluar untuk beralih, atau untuk beralih tampilan ke atas dan ke bawah. Konten dapat berupa teks, gambar, dll. Mendukung berbagai tag, tag daftar, UL, LI, LI, div, dan t tag.

Ini dapat dengan mudah mewujudkan tampilan switching acak otomatis dari konten berita atau pengumuman, atau tampilan pemutaran slideshow gambar, dll. Gambar berikut menunjukkan fase transisi switching slide gambar:

Demo plug-in ini sulit untuk diklik di sini: Halaman demo Innerfade

Banyak blog dan situs web tutorial berisi kode penyorotan JavaScript yang mengonversi elemen pra atau elemen teks ke dalam daftar yang dipesan, seperti yang ditunjukkan pada tangkapan layar berikut. Salah satu plugin yang menyoroti kode terkenal adalah sintlighlight Alex Gorbatchev.

Di bawah ini adalah tangkapan layar efek yang mirip dengan plugin yang disorot:

Anda dapat mengklik di sini untuk mempratinjau efeknya (halaman demo menunjukkan kode plug-in cookie jQuery).

Komentar blog, termasuk situs-situs yang digerakkan oleh WordPress ini, dibangun dalam daftar yang dipesan, menawarkan opsi gaya yang sangat fleksibel dan meletakkan dasar untuk bersarang komentar. Gambar berikut adalah tangkapan layar dari bagian komentar dari kisah Mr.Gray - Web Interaction Design Grey 8 Artikel Aplikasi yang Dirilis oleh Tencent CDC TD kemarin.

Perwakilan yang paling khas adalah tampilan ribuan kategori produk di kolom kategori bayi beranda Taobao:

Seperti yang dapat dilihat dari tangkapan layar, tujuan kategori ini ditampilkan menggunakan daftar definisi DL, DT, dan DD.

Ada banyak aplikasi lain untuk elemen daftar, seperti bilah kemajuan untuk unggahan multi-gambar, menu langkah CSS, menu yang tumpang tindih, dan sebagainya. Saya tidak akan menunjukkannya satu per satu di sini.

Elemen tag HTML adalah batu bata dan ubin, yang terlihat sangat biasa, tetapi ketika datang ke desainer yang sangat baik dan pekerja yang sangat baik, mereka akan memberikan potensi dan pesona mereka yang tak terbatas, jadi kami memiliki internet yang penuh warna. Hal yang sama berlaku untuk elemen daftar. Meskipun ada lusinan lebih banyak kegunaan dan teknik untuk dibahas dalam artikel ini, beberapa hal yang ditampilkan dalam artikel ini akan memberi kita pemahaman menyeluruh tentang ikhtisar elemen tag daftar dalam HTML, membantu Anda membangun bangunan internet yang indah dengan daftar batu bata.

• Listamatic

• Desain CSS: Daftar Taming

• Daftar CSS di W3Schools

• Daftar definisi - disalahgunakan atau disalahpahami?

• Daftar gaya CSS: 20+ demo, tutorial dan praktik terbaik

• Daftar elemen pada referensi HTML Sitepoint