Làm cách nào để xem trang web css?

Có rất nhiều thiết kế bố trí khác nhau để lựa chọn. Tuy nhiên, cấu trúc ở trên, là một trong những cấu trúc phổ biến nhất và chúng ta sẽ xem xét kỹ hơn về nó trong hướng dẫn này

---

tiêu đề

Tiêu đề thường nằm ở đầu trang web (hoặc ngay bên dưới menu điều hướng trên cùng). Nó thường chứa logo hoặc tên trang web

Thí dụ

.header {
  màu nền. #F1F1F1;
  căn chỉnh văn bản. trung tâm;
  phần đệm. 20px;
}

Kết quả

Tự mình thử »

---

---

Thanh điều hướng

Thanh điều hướng chứa danh sách các liên kết để giúp khách truy cập điều hướng qua trang web của bạn

Thí dụ

/* Vùng chứa thanh điều hướng */
. topnav {
  tràn. ẩn;
  màu nền. #333;
}

/* Liên kết thanh điều hướng */
. topnav {
  float. trái;
  hiển thị. khối;
  màu. #f2f2f2;
  căn chỉnh văn bản. trung tâm;
  phần đệm. 14px 16px;
  trang trí văn bản. không;
}

/* Liên kết - đổi màu khi di chuột */
. topnav một. di chuột {
  màu nền. #ddd;
  màu. đen;
}

Kết quả

Tự mình thử »

---

Nội dung

Bố cục trong phần này, thường phụ thuộc vào đối tượng người dùng. Bố cục phổ biến nhất là một (hoặc kết hợp chúng) sau đây

• 1 cột (thường dùng cho trình duyệt di động)
• 2 cột (thường dùng cho máy tính bảng và máy tính xách tay)
• Bố cục 3 cột (chỉ dùng cho máy bàn)

Chúng tôi sẽ tạo bố cục 3 cột và thay đổi thành bố cục 1 cột trên màn hình nhỏ hơn

Thí dụ

/* Tạo ba cột bằng nhau trôi nổi cạnh nhau */
. cột {
  float. trái;
  chiều rộng. 33. 33%;
}

/* Xóa số float sau các cột */
. hàng ngang. sau {
  nội dung. "";
  hiển thị. bảng;
  xóa. cả hai;
}

/* Bố cục đáp ứng - làm cho ba cột xếp chồng lên nhau thay vì cạnh nhau trên màn hình nhỏ hơn (rộng 600px trở xuống) */
@màn hình phương tiện và . 600px) {
. cột {
    chiều rộng. 100%;
  }
}

Kết quả

Cột

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ngồi amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique

Cột

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ngồi amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique

Cột

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ngồi amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique

Tự mình thử »

Mẹo. Để tạo bố cục 2 cột, hãy thay đổi chiều rộng thành 50%. Để tạo bố cục 4 cột, hãy sử dụng 25%, v.v.

Mẹo. Bạn có thắc mắc quy tắc @media hoạt động như thế nào không?

Mẹo. Một cách hiện đại hơn để tạo bố cục cột là sử dụng CSS Flexbox. Tuy nhiên, nó không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn. Nếu bạn yêu cầu hỗ trợ IE6-10, hãy sử dụng số float (như hình trên)

Để tìm hiểu thêm về Mô-đun bố cục hộp linh hoạt, hãy đọc chương CSS Flexbox của chúng tôi

---

Cột không bằng nhau

Nội dung chính là phần lớn nhất và quan trọng nhất trên trang web của bạn

Chiều rộng cột không bằng nhau là phổ biến, do đó phần lớn không gian được dành cho nội dung chính. Nội dung phụ (nếu có) thường được dùng để điều hướng thay thế hoặc để chỉ rõ thông tin liên quan đến nội dung chính. Thay đổi độ rộng theo ý muốn của bạn, chỉ nhớ rằng nó phải tăng tổng cộng lên tới 100%

Thí dụ

.column {
  float. trái;
}

/* Cột trái và phải */
. cột. cạnh {
  chiều rộng. 25%;
}

/* Cột giữa */
. cột. giữa {
  chiều rộng. 50%;
}

/* Bố cục đáp ứng - làm cho ba cột xếp chồng lên nhau thay vì cạnh nhau */
@màn hình phương tiện và (chiều rộng tối đa. 600px) {
. cột. cạnh,. cột. giữa {
    chiều rộng. 100%;
  }
}

Kết quả

Cạnh

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Nội dung chính

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ngồi amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque xe, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis

Cạnh

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Tự mình thử »

---

chân trang

Chân trang được đặt ở cuối trang của bạn. Nó thường chứa thông tin như bản quyền và thông tin liên hệ

Thí dụ

.footer {
  màu nền. #F1F1F1;
  căn chỉnh văn bản. trung tâm;
  phần đệm. 10px;
}

Kết quả

Tự mình thử »

---

Bố cục trang web đáp ứng

Bằng cách sử dụng một số mã CSS ở trên, chúng tôi đã tạo bố cục trang web đáp ứng, thay đổi giữa hai cột và cột có chiều rộng đầy đủ tùy thuộc vào độ rộng màn hình

Tự mình thử »

Bạn đã bao giờ nghe nói về Không gian W3Schools chưa?