# 106: Xây dựng Khu vực Đoạn mã, Phần 3 (HTML & CSS) - Thủ thuật CSS

Anonim

Chúng tôi sắp hoàn thành việc xây dựng trang chủ của khu vực Đoạn mã của trang web. Ngay lập tức, chúng tôi bắt đầu điều chỉnh mọi thứ và đưa nhiều thứ vào hình dạng.

Chúng tôi có một trải nghiệm kỳ lạ khi phần tử giả được định vị tuyệt đối không phản ứng với lề trái âm nhưng lại ổn với lề phải dương. Ai biết.

Sau đó, chúng tôi chuyển sang tạo một lớp “hoạt động” cho menu bên trái của các danh mục đoạn mã. Bạn chỉ duyệt một trong số chúng tại một thời điểm (xem danh sách các đoạn trích liên quan ở bên phải). Giả sử “HTML” đang hoạt động và bạn nhấp vào “CSS”, danh sách mới chỉ các đoạn trích liên quan đến CSS hiển thị ở bên phải. Cần phải có một số kiểu dáng để hiển thị cái nào đang hoạt động. Thay đổi chỉ số z trên một lớp đang hoạt động là đủ để làm việc cho chúng tôi (làm cho nó nằm phía trên bóng tối).

Đối với danh sách bên phải, thật hấp dẫn để hiển thị các liên kết: khối - nhưng nó gần như là khu vực có thể nhấp quá nhiều. Có vẻ kỳ lạ khi nghĩ điều đó, nhưng tôi nghĩ đó là sự thật. Bạn không muốn những cú nhấp chuột tình cờ ở rất xa văn bản của liên kết để kích hoạt liên kết đó. Nó sẽ rất ngạc nhiên và kỳ lạ. Vì vậy, bản thân các liên kết có thể là khối nội tuyến để chúng có thể có một số phần đệm, nhưng không lấp đầy toàn bộ chiều rộng như mục danh sách mà chúng có.

Đối với bản thân các liên kết, chúng tôi quyết định rằng việc tô màu tiêu đề của các đoạn trích bằng màu của danh mục mà chúng thuộc về là quá mạnh. Thay vào đó, các liên kết sẽ có màu xám nhưng màu cuộn qua có thể có màu đặc biệt đó.

Chúng tôi cũng quyết định rằng danh sách thẳng xuống một cột hoạt động ngay bây giờ, nhưng nếu việc cuộn quá lố bịch có thể một ngày nào đó chúng tôi có thể chia thành hai cột và rút ngắn nó.