Dàn bố cục cho page footer
Phần cuối cùng của Pandaisia Chocolates home page là footer, cái chứa ba navigation lists
theo chiều dọc và một phần tử section với thông tin liên hệ cho cửa hàng. Một khi left margin
được giải phóng khỏi các đối tượng được làm trôi trước đó, làm trôi 4 phần tử này trên lề trái
với các widths của ba navigation lists mỗi cái được thiết lập thành 22 % của body width
và phần tử section chiếm 34 % còn lại.
Để dàn bố cục cho page footer:
1. Quay trở lại file pc_home.css trong editor của bạn và cuộn xuống tới phần Footer
Styles.
2. Điền các quy tắc style sau:
footer {
clear: left;
}
footer > nav.verticalNavigation {
float: left;
width: 22%;
}
footer > section#contactInfo {
float: left;
width: 34%;
}
3. Lưu thay đổi đối với style sheet và sau đó reload lại pc_home.html trong trình duyệt của
bạn. Ảnh dưới thể hiện bố cục mới của footer.
Anne yêu cầu bạn thay đổi màu nền của footer thành dark brown để thể hiện tốt hơn nội dung
text.
Để thiết lập màu nền footer:
1. Quay trở lại file pc_home.css trong editor của bạn và đi đến phần Footer Styles.
2. Điền đặc tính sau cho cái chọn footer:
background-color: rgb(71, 52, 29);
3. Lưu thay đổi của bạn đối với style sheet và sau đó reload lại pc_home.html trong trình
duyệt của bạn. Chú ý rằng màu nền không bị thay đổi.
Tại sao thay đổi đối với màu nền không có hiệu ứng? Để giúp bạn hiểu tốt hơn tại sao, bạn
sẽ nhìn lại một lần nữa bản chất của các phần tử được làm trôi ở học phần tiếp theo.