Mục lục:
Video: Section 8 2025
Các bố cục chất lỏng rất tuyệt vời. Chúng rất linh hoạt và không khó xây dựng trong HTML5 và CSS3 Đôi khi, mặc dù, rất tốt khi sử dụng bố cục chiều rộng cố định, đặc biệt nếu bạn muốn bố cục phù hợp với một hình nền đặc biệt
Thuộc tính chính của bố cục chiều rộng cố định là sử dụng một phép đo cố định (gần như luôn luôn là điểm ảnh), chứ không phải là các phép đo tỷ lệ được sử dụng trong một cách bố trí chất lỏng.
Cách thiết lập HTML
Như thường lệ, mã HTML là tối thiểu. có chứa một vài div được đặt tên
fixedWidth. htmlCố định Width Giao diện
Cột bên trái
Right Column
Footer
CSS
Sau khi HTML được thiết lập, bạn có thể sử dụng CSS để thực thi lược đồ hai cột.
Đây là mã CSS:
#header {background-color: # e2e393; border-bottom: 3px solid đen, text-align: center, width: 800px, padding-top: 1em;} # còn lại {phao: trái; chiều rộng: 200px; rõ ràng: trái; đường viền phải: 1px màu đen; chiều cao: 30m; tràn: tự động; padding-phải:. 5em;} #right {float: left; chiều rộng: 570px; chiều cao: 30m; tràn: tự động; padding-left:. 5em;} #footer {width: 800px; text-align: trung tâm; màu nền: # e2e393; border-top: 3px đôi màu đen; rõ ràng: cả hai;}
Tất cả đều khá đơn giản:
-
Màu mỗi phần tử để xem những gì đang xảy ra.
Bắt đầu bằng cách đưa ra mỗi màu nền khác nhau để bạn có thể thấy được điều gì đang xảy ra.
-
Xác định chiều rộng tổng thể của bố cục.
Chọn chiều rộng mục tiêu cho toàn bộ bố cục. 800 pixel đã được chọn bởi vì nó có chiều rộng chuẩn hợp lý.
-
Điều chỉnh độ rộng của các phần tử trên toàn trang.
Việc bắt đầu với các phần tử như tiêu đề và chân trang thường chiếm toàn bộ chiều rộng của thiết kế thường dễ dàng nhất.
-
Phao nổi cột.
Phao từng cột sang trái.
-
Đặt chiều rộng của cột.
Bắt đầu bằng cách làm cho chiều rộng cột thêm vào chiều rộng của toàn bộ thiết kế. Sau đó bạn sẽ điều chỉnh một chút cho lề và biên.
-
Xóa cột bên trái.
Đảm bảo cột bên trái có áp dụng nguyên tắc rõ ràng: bên trái.
-
Đặt độ cao cột.
Cho mỗi cột có cùng chiều cao. Điều này làm mọi việc trở nên đúng nếu bạn thêm các đường viền hoặc màu nền vào các cột.
-
Điều chỉnh biên giới và đệm.
Sử dụng các đường viền, đệm và lề để điều chỉnh trang của bạn để có được cái nhìn mà bạn muốn.
-
Điều chỉnh lại độ rộng.
Thêm đường viền, đệm và lề có thể thay đổi độ rộng của các phần tử hiện có.Sau khi bạn đã sửa đổi các thuộc tính này, hãy cẩn thận xem bố cục của bạn để đảm bảo nó không bị rối tung, và sửa đổi các độ rộng khác nhau nếu cần.
