Kami mempunyai semua kandungan yang kami perlukan pada keluaran halaman ini dan tajuknya ada. Sekarang kita boleh memulakan CSSin ke dalam reka bentuk yang kita jalankan di Photoshop.
Satu perkara yang kami buat ialah menjadikan senarai tujuh kategori itu statik. Ia hanya satu panggilan wp_list_pages () dan dengan itu sedikit lebih cekap. Sekiranya kita pernah menukar kategori, itu adalah perkara besar dan tidak ada masalah untuk melihat semula kod ini.
Kami memerlukan reka bentuk dua lajur di sini pada asasnya. Itu cukup mudah dilakukan hanya dengan mengapungkan beberapa div (atau lebih mungkin, menggunakan kerangka grid yang ada). Tetapi itu tidak membantu kita membuat lajur “ketinggian yang sama” seperti yang ditentukan oleh reka bentuk kita di sini. Bagaimanapun, div tanpa ketinggian yang ditetapkan hanya setinggi kandungan di dalamnya. Menetapkan ketinggian pada div umumnya adalah idea yang tidak baik.
Untuk mendapatkan lajur ketinggian yang sama, kami memalsukannya dengan idea kecil yang kemas di mana kami menggunakan satu pembungkus besar (yang setinggi tiang tertinggi di dalamnya) dan menetapkan latar belakang gradien. Bukan gradien pudar-satu-warna-ke-lain, tetapi kecerunan dengan berhenti keras tepat di mana lajur pecah. Ini memberi kita warna kelabu-di-kiri-kiri dan putih-di-kanan yang kita perlukan.
Kami menggunakan warna latar belakang yang berbeza untuk setiap pautan kategori di lajur kiri dengan rangkaian: pemilih anak-anak (). Kami memutuskan untuk melakukannya dengan cara bukan kelas kerana susunan warna lebih penting daripada memadankan warna dengan kategori (agak sewenang-wenang).
Sebelum kita selesai dengan screencast ini, kita membuat kesan bayangan (pemisahan tegas antara lajur) dengan menerapkan elemen pseudo pada navigasi yang membentang dari atas ke bawah halaman. Elemen pseudo ini mempunyai kecerunan hitam-ke-telus sendiri yang menjadikannya seperti bayangan.