# 106: Area Cuplikan Bangunan, Bagian 3 (HTML & CSS) - Trik CSS

Anonim

Kami hampir selesai membangun beranda dari area Snippets situs. Segera, kami mulai mengutak-atik hal-hal dan membentuk lebih banyak hal.

Kami memiliki pengalaman aneh di mana elemen semu yang diposisikan secara absolut tidak merespons margin kiri negatif tetapi baik-baik saja dengan margin kanan positif. Siapa yang tahu.

Kemudian kita pindah ke membuat kelas "aktif" untuk menu sebelah kiri kategori cuplikan. Anda hanya menjelajah salah satu dari mereka pada satu waktu (lihat daftar cuplikan terkait di sebelah kanan). Katakanlah "HTML" aktif dan Anda mengklik "CSS", daftar baru hanya cuplikan terkait CSS akan muncul di sebelah kanan. Perlu ada beberapa gaya untuk menunjukkan mana yang aktif. Mengubah indeks-z pada kelas aktif sudah cukup untuk bekerja bagi kita (membuatnya berada di atas bayangan).

Untuk daftar di sebelah kanan, mungkin tergoda untuk membuat tautan ditampilkan: blokir - tetapi ini hampir merupakan area yang dapat diklik terlalu banyak. Sepertinya aneh untuk berpikir seperti itu, tapi menurutku itu benar. Anda tidak ingin klik yang tidak disengaja sangat jauh dari teks tautan itu sendiri untuk mengaktifkan tautan itu. Ini akan mengejutkan dan aneh. Jadi, tautan itu sendiri dapat berupa blok sebaris sehingga mereka dapat memiliki beberapa padding, tetapi jangan mengisi lebar penuh seperti item daftar tempat mereka berada.

Untuk tautan itu sendiri, kami memutuskan bahwa mewarnai judul cuplikan dengan warna kategori miliknya terlalu kuat. Sebaliknya, tautan akan menjadi abu-abu tetapi warna gerakan mouse dapat mengambil warna khusus tersebut.

Kami juga memutuskan bahwa daftar satu kolom lurus ke bawah berfungsi untuk saat ini, tetapi jika pengguliran menjadi terlalu konyol mungkin suatu hari kami dapat memecah menjadi dua kolom dan mempersingkatnya.