# 071: CSSing the Footer, Phần 1 - Thủ thuật CSS

Anonim

Với cấu trúc HTML cho footer, chúng ta có những thứ cần thiết để bắt đầu tạo kiểu và làm cho footer này trông giống như những gì chúng ta đã thiết kế trong Photoshop.

Chúng tôi tạo một tệp SCSS mới chỉ dành cho phần chân trang, bởi vì điều đó chỉ có ý nghĩa khi giữ mô-đun hóa và đó là những gì chúng tôi đã làm cho mọi thứ khác. Chúng tôi @ nhập nó vào biểu định kiểu chính ở dưới cùng.

Chúng tôi làm tối phần chân trang bằng cách chỉ sử dụng một chút nền RGBa. Sass giúp chúng ta một chút vì bạn có thể làm điều này trong Sass mà là siêu mát mẻ: rgba(black, 0.5); Chúng tôi sử dụng một bóng hộp bên trong để tạo hiệu ứng giống như kệ.

Chúng tôi đẩy nội dung ra xa các cạnh với phần đệm trái và phải. Ngay lập tức, chúng ta cần điều chỉnh số lượng padding đó dựa trên điểm ngắt hiện tại.

Chúng tôi tạo kiểu cho chân trang dưới cùng theo cùng một cách. Nó chỉ tối hơn một chút để làm cho nó trông thấp hơn một cấp độ khác.