CSS untuk Mencipta Senarai Penangkapan Mata

• April 25, 2024

Senarai adalah elemen reka bentuk web yang hebat kerana ia membolehkan bacaan mudah oleh pengguna akhir. Kebanyakan pengguna menginginkan jawapan dengan cepat, dan hanya akan membuat tapak web pada mulanya untuk melihat apakah ia menjawab soalan mereka. Ini benar terutamanya jika mereka memasukkan laman web anda melalui mesin carian.

Penggunaan teg dan senarai tajuk adalah cara yang baik untuk membolehkan orang melihat kandungan utama laman web anda dengan mudah. Sekiranya mereka merasakan senarai dan sub tajuk menarik, terdapat peluang yang lebih besar untuk kekal di laman web anda. Ini sudah tentu membawa kepada penurunan harga "melantun" dan membantu meningkatkan kredibiliti dan kedudukan laman web anda dalam enjin. Apa-apa pun yang meningkatkan kebolehbacaan, menjadikannya lebih mudah bagi mata untuk skim, akan sentiasa mendapat manfaat daripada laman web. Reka bentuk yang hebat sentiasa menyimpan kebolehbacaan dalam minda.

CSS adalah cara yang mudah dan berkesan untuk membuat senarai bergaya dengan peluru tersuai (penanda). Anda boleh memasukkan bentuk yang berbeza atau grafik tersuai mudah yang mengikat logo, warna atau tema tapak web anda. Sebagai contoh, di laman web lawatan hantu, saya membuat ikon hantu kecil yang digunakan di bar navigasi sisi dan pada item senarai tidak disusun di halaman utama. Ia mudah, tetapi sangat comel dan terikat pada tema laman web, menjadikan unsur-unsur halaman menonjol.

Peluru kali lain mungkin mengalih perhatian daripada kandungan penting dalam senarai. Dalam hal ini, sifat senarai gaya "tidak ada" boleh digunakan untuk menghapus penanda yang dijana secara automatik.

Senarai Gaya Hartanah

Gunakan ciri jenis gaya senarai untuk memilih jenis penanda yang muncul dengan setiap item senarai. Nilai yang ada ialah cakera, bulatan, persegi, perpuluhan, roman bawah, roman atas, greek rendah, rendah latin, latin atas, alpha rendah, alpha atas, dan tidak ada.

Untuk menentukan imej anda sendiri sebagai penanda, gunakan gaya imej gaya senarai seperti berikut:

ul {list-style-image: url (imagename.jpg);
senarai gaya-kedudukan: di luar;
}

Url adalah relatif kepada lembaran gaya dan harus menunjuk ke folder di mana imej anda. Dalam kes ini, imej akan berada dalam folder yang sama seperti fail css dan html. Jika anda meletakkan imej anda dalam folder berasingan, anda akan memasukkannya juga: url (images / imagename.jpg)

Kedudukan Marker

Anda juga boleh menyesuaikan kedudukan penanda. Dalam contoh di atas, harta luar membuat peluru itu muncul di luar kawasan kandungan.
senarai gaya-gaya: di dalam membolehkan peluru di dalam kawasan kandungan supaya ia masuk ke dalam kandungan senarai.

Teknik Shorthand

Satu lagi cara cepat untuk memformat senarai menggunakan CSS adalah teknik pendek. Dengan kaedah ini, semua sifat senarai ditentukan dalam satu harta tunggal:

ul
{
gaya senarai: url bulatan ("image.gif");
}

dalam kaedah ringkas, semua nilai mesti muncul dalam susunan tertentu seperti berikut:

jenis gaya senarai
senarai gaya-gaya (di dalam, di luar)
senarai gaya-imej

Tidak kira jika anda melangkau nilai, selagi yang lain tetap berada dalam urutan yang betul.

Senarai tersuai sangat berguna dan CSS menjadikannya mudah untuk dicapai. Butiran ringkas mengubah laman web purata ke laman web berprestasi tinggi.

Arahan Video: Totally Spies! The Movie (April 2024).