Chúng tôi có tất cả nội dung chúng tôi cần trên đầu ra trang này và chúng tôi có tiêu đề tại chỗ. Bây giờ chúng ta có thể bắt đầu CSS đưa nội dung vào thiết kế mà chúng ta đang sử dụng trong Photoshop.
Một điều chúng tôi đã làm là làm cho danh sách bảy danh mục tĩnh. Nó chỉ là một lệnh gọi wp_list_pages () ít hơn và do đó hiệu quả hơn một chút. Nếu chúng tôi thay đổi các danh mục, đó là một điều lớn, không có gì to tát để xem lại mã này.
Về cơ bản, chúng ta cần một thiết kế hai cột ở đây. Điều đó đủ dễ dàng để thực hiện chỉ với một vài div (hoặc nhiều khả năng hơn, sử dụng khung lưới hiện có của chúng tôi). Nhưng điều đó không giúp chúng tôi tạo ra các cột "có chiều cao bằng nhau" như thiết kế của chúng tôi quy định ở đây. Rốt cuộc, các div không có chiều cao đặt chỉ cao bằng nội dung bên trong chúng. Đặt chiều cao trên một div nói chung là một ý tưởng tồi.
Để có được các cột có chiều cao bằng nhau, chúng tôi giả mạo nó bằng một ý tưởng nhỏ gọn gàng trong đó chúng tôi sử dụng một div wrapper lớn (cao bằng cột cao nhất trong số các cột mà nó chứa) và thiết lập nền gradient. Không phải là một gradient mờ dần một màu này sang một màu khác, mà là một gradient có điểm dừng cứng ngay tại vị trí cột bị ngắt. Điều này cung cấp cho chúng ta màu xám bên trái và màu trắng bên phải mà chúng ta cần.
Chúng tôi áp dụng các màu nền khác nhau cho từng liên kết danh mục trong cột bên trái với một loạt các bộ chọn: nth-child (). Chúng tôi quyết định làm theo cách này thay vì các lớp vì thứ tự của các màu quan trọng hơn là khớp màu với danh mục (nó khá tùy ý).
Trước khi thực hiện xong màn hình này, chúng ta tạo hiệu ứng đổ bóng (sự phân tách rõ ràng giữa các cột) bằng cách áp dụng một phần tử giả vào phần điều hướng trải dài từ trên xuống dưới của trang. Phần tử giả này có độ dốc từ đen đến trong suốt của riêng nó, làm cho nó trông giống như một cái bóng.