CSS untuk Membuat Daftar Penangkapan Mata
Daftar adalah elemen desain web yang hebat karena memungkinkan pembacaan yang mudah oleh pengguna akhir. Sebagian besar pengguna menginginkan jawaban dengan cepat, dan awalnya hanya akan membaca sepintas situs web untuk melihat apakah itu menjawab pertanyaan mereka. Ini terutama benar jika mereka memasuki situs web Anda melalui mesin pencari.

Penggunaan tag dan daftar tajuk adalah cara yang bagus untuk memungkinkan orang melihat konten utama situs web Anda dengan mudah. Jika mereka merasa daftar dan subjudulnya menarik, ada kemungkinan besar mereka akan tetap ada di situs Anda. Ini tentu saja, mengarah pada penurunan tingkat "bouncing" dan membantu meningkatkan kredibilitas dan peringkat situs web Anda di mesin. Apa pun yang meningkatkan keterbacaan, sehingga memudahkan mata untuk membaca sepintas, akan selalu menguntungkan situs web. Desain yang bagus selalu menjaga keterbacaan di pikiran.

CSS adalah cara mudah dan sangat efektif untuk membuat daftar gaya dengan peluru khusus (spidol). Anda dapat menyertakan berbagai bentuk atau grafik khusus yang disesuaikan dengan logo, warna, atau tema situs web Anda. Misalnya, di situs web wisata hantu, saya membuat ikon hantu kecil yang digunakan di bilah navigasi samping dan pada item daftar tidak berurutan di halaman utama. Itu sederhana, tetapi sangat lucu dan diikat ke dalam tema situs, membuat elemen halaman tersebut menonjol.

Kali lain peluru dapat mengalihkan perhatian dari konten penting dalam daftar. Dalam hal itu, properti gaya daftar "tidak ada" dapat digunakan untuk menghapus penanda yang dibuat secara otomatis.

Daftar Style Style



Gunakan properti tipe-daftar-gaya untuk memilih jenis penanda yang muncul pada setiap item daftar. Nilai yang tersedia adalah cakram, lingkaran, bujur sangkar, desimal, roman rendah, roman atas, Yunani rendah, latin rendah, latin atas, alpha rendah, alpha atas, dan tidak ada.

Untuk menentukan gambar Anda sendiri sebagai penanda, gunakan properti daftar-gaya-gambar sebagai berikut:

ul {list-style-image: url (imagename.jpg);
daftar-gaya-posisi: luar;
}

URL relatif ke stylesheet dan harus mengarah ke folder tempat gambar Anda. Dalam hal ini, gambar akan berada di folder yang sama dengan file css dan html. Jika Anda menempatkan gambar Anda di folder terpisah, Anda juga akan memasukkannya: url (images / imagename.jpg)

Posisi Penanda



Anda juga dapat menyesuaikan posisi marker. Pada contoh di atas, properti luar membuat peluru muncul di luar area konten.
daftar-gaya-posisi: di dalam memungkinkan peluru di dalam area konten sehingga berjalan ke dalam konten daftar

Teknik Steno



Cara cepat lain untuk memformat daftar menggunakan CSS adalah teknik singkatan. Dengan metode ini, semua properti daftar ditentukan dalam satu properti tunggal:

ul
{
daftar-gaya: lingkaran url ("image.gif");
}

dalam metode singkatan, semua nilai harus muncul dalam urutan yang ditentukan sebagai berikut:

daftar-gaya-tipe
daftar-gaya-posisi (di dalam, di luar)
daftar-gaya-gambar

Tidak masalah jika Anda melewatkan nilai, asalkan yang lainnya tetap dalam urutan yang benar.

Daftar khusus sangat berguna dan CSS membuatnya mudah untuk dicapai. Detail sederhana mengubah situs web rata-rata menjadi situs web berkinerja terbaik.


Petunjuk Video: Belajar PHP untuk PEMULA | 10. DATABASE & MySQL (Maret 2024).