Thêm hình ảnh nền có 2 nhược điểm:
Mỗi khi bạn muốn thay đổi màu sắc của tiêu đề của bạn, bạn phải mở Photoshop của bạn và thay đổi màu sắc ở đó và sau đó thay đổi nó một lần nữa trong CSS của bạn.
Bây giờ bạn muốn màu nền của tiêu đề trải dài trên trang nhưng bạn cũng nên làm gì nếu bạn muốn làm điều đó với chân trang?
Giải pháp đơn giản nhất là cái này:
(bạn không chỉ tạo ra một một cách dễ dàng để kéo dãn màu sắc trên trang, có thể sử dụng màu sắc khác nhau trong tất cả các nội dung header và footer, mà còn nó tiết kiệm cho mình từ vấn đề lợi nhuận tăng gấp đôi của IE (khi bạn sử dụng chiều rộng và lợi nhuận trong các yếu tố tương tự)
index.html:.
<html>
<body id="body">
<div id="header">
<div class="container">
<!-- header's content here -->
</div><!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<!-- main content here -->
<div id="footer">
<div class="container">
<!-- footer's content here -->
</div><!-- .container -->
</div><!-- #footer -->
</body>
</html>
.210
style.css:
.container {
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
width: 960px;
}
#header {
background: #EEE;
}
#content {
background-color: #F9F9F9;
}
#footer {
background-color: #333;
color: #BBB;
clear: both;
}
Trong ví dụ này, div.container tập trung các yếu tố và cũng mang lại cho họ một chiều rộng, và màu nền có thể kéo dài trên trang vì # header, #content và #footer không có chiều rộng . Và trong tương lai, chỉ áp dụng lề và đệm cho số div bên trong .container và bạn sẽ tiết kiệm được nhiều vấn đề với IE trong tương lai.
Đây là một câu trả lời tuyệt vời. Tuy nhiên, đây là một bản ghi nhớ có thể bắt được một số người - nó chắc chắn đã bắt được tôi! Một đồng nghiệp của tôi đang thực hiện một số sửa lỗi và cần thiết để tìm ra bố cục nào đang được sử dụng trên các phần khác nhau của ứng dụng web của chúng tôi. Cách đơn giản để tìm ra điều này là đặt chú thích ở đầu tệp mẫu ... trước khi khai báo DOCTYPE. Bạn đoán nó: trang web được hiển thị hoàn hảo trong Firefox và sự khác biệt đáng chú ý duy nhất trong IE là thanh trên cùng không hoàn toàn căng thẳng trên toàn trang. Việc sửa chữa là để đảm bảo không có gì trước DOCTYPE. – JamesG