Khối nằm ngang dưới cùng của bố cục trang thường được gọi là "footer". Trong đó, cũng như trong các khối khác của trang, các yếu tố thiết kế được đặt, nhưng không giống như các khối khác, các vấn đề cụ thể thường nảy sinh với vị trí của khối cụ thể này. Chúng được kết nối với thực tế là các trình duyệt khác nhau hiểu các tiêu chuẩn của ngôn ngữ CSS khác nhau và có thể khá khó khăn để đặt chân trang ở cạnh dưới cùng của cửa sổ trình duyệt. Dưới đây là mã cho một trong những giải pháp cho vấn đề này.
Cần thiết
Kiến thức cơ bản về CSS và HTML
Hướng dẫn
Bước 1
Trong dòng đầu tiên của mã nguồn của trang, hãy đặt một tham chiếu đến đặc điểm kỹ thuật Chuyển tiếp XHTML 1.0:
Bước 2
Đặt các khối chính của cấu trúc trang bên trong nội dung của tài liệu (giữa các thẻ và). Khối mà nội dung chính sẽ được đặt phải bao gồm hai lớp lồng nhau. Ví dụ: hãy để cái bên ngoài có số nhận dạng là OuterDiv và cái bên trong - InnerDiv:
Đây là nơi chứa nội dung chính của trang.
Phía sau chúng đặt một khối chân trang với một số nhận dạng, ví dụ: FooterDiv:
Chân trang của trang.
Bước 3
Đặt vào phần đầu của mã HTML (giữa thẻ và) một liên kết đến tệp bên ngoài với mô tả về kiểu css:
@import "footerStyle.css";
Bước 4
Lưu mã trang chính hoàn chỉnh vào một tệp có phần mở rộng html. Nó có thể trông như thế này:
Chân trang được nhấn
@import "footerStyle.css";
Đây là nơi chứa nội dung chính của trang.
Chân trang của trang.
Bước 5
Tạo tệp biểu định kiểu - tệp văn bản thuần túy sẽ được lưu với phần mở rộng css và tên bạn đã chỉ định trong mã HTML (footerStyle.css). Ghi vào tệp này các mô tả kiểu sau cho các khối được sử dụng trong trang:
* {lề: 0; đệm: 0}
html, nội dung {height: 100%;}
thân hình {
chức vụ: thân nhân;
màu: # 222222;
}
#OuterDiv {
lề: 0;
chiều cao tối thiểu: 100%;
nền: #aaaaaa;
màu: # 222222;
}
* html #OuterDiv {height: 100%;}
#FooterDiv {
chức vụ: thân nhân;
rõ ràng: cả hai;
margin-top: -60px;
chiều cao: 60px;
chiều rộng: 100%;
màu nền: DarkBlue;
text-align: center;
màu: #eeeeff;
}
. InnerDiv {
chiều rộng: 100%;
float: trái;
}
