Ví dụ về bố cục
.png)
Các phần tử bố cục HTML
Websites thường hiển thị nội dung trong nhiều cột (như tạp chí hoặc báo).
HTML5 cung cấp các phần tử ngữ nghĩa mới để xác định các phần khác nhau của trang web:
|
Thẻ |
Mô tả |
|
<header> |
Xác định header(tiêu đề/đầu trang) của một tài liệu hoặc một vùng |
|
<nav> |
Xác định bộ chứa cho liên kết điều hướng |
|
<section> |
Xác định một vùng trong tài liệu |
|
<article> |
Xác định một bài viết độc lập |
|
<aside> |
Xác định nội dung bên lề nội dung chính (giống sidebar) |
|
<footer> |
Xác định phần footer (chân trang/cuối trang) của tài liệu hoặc một vùng (section) |
|
<details> |
Xác định những chi tiết thêm |
|
<summary> |
Xác định tiêu đề cho phần tử <details> |
Các kỹ thuật để tạo bố cục HTML
Có 5 cách khác nhau để tạo bố cục gồm nhiều cột, mỗi cách đều có ưu và nhược điểm riêng:
- Dùng bảng HTML (không khuyến khích)
- Dùng thuộc tính CSS float
- Dùng CSS flexbox
- Dùng framework (thư viện được viết sẵn)
- Dùng CSS grid
Vậy nên chọn cách nào?
Bảng HTML
Phần tử <table> không được thiết kế để làm công cụ tạo bố cục, mục đích của phần tử <table> là để hiển thị dữ liệu dạng bảng. Vì thế, không nên dùng bảng để bố cục trang web. Nó sẽ khiến code bị rối, bạn cứ thử tưởng tượng xem sẽ khó khăn như nào để thiết kế lại bố cục trang khi vài tháng sau đọc lại thì code cứ rối tung hết lên xD. Tốt nhất là không dùng bảng để thiết kế bố cục trang.
CSS framework
Nếu muốn tạo bố cục một cách nhanh chóng thì bạn có thể dùng framework như Bootstrap hoặc W3.CSS
CSS float
Dùng thuộc tính CSS float để tạo bố cục toàn bộ trang web là cách khá phổ biến. Vì nó dễ học, chỉ cần nhớ cách thuộc tính float và clear hoạt động là được.
Nhược điểm: Các phần tử float được gắn liền với luồng tài liệu, nên có thể làm ảnh hưởng tới tính linh động. Bạn sẽ được tìm hiểu thêm về float ở chương sau.
Ví dụ về float
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Tạo 2 cột cạnh nhau */
nav {
float: left;
width: 30%;
height: 300px;
/* Đoạn này dùng để ví dụ cho dễ nhìn */
background: #ccc;
padding: 20px;
}
/* Style danh sách ở trong menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
/* Đoạn này dùng để ví dụ cho dễ nhìn */
}
/* Bỏ floats sau khi tạo cột */
section:after {
content: "";
display: table;
clear: both;
}
/* Style footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive - 2 cột sẽ chiếm 100% độ rộng ở màn hình có độ rộng tối đa 600px (cột này sẽ xếp chồng lên cột kia) */
@media (max-width: 600px) {
nav,
article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>Bố cục CSS Float</h2>
<p>Trong ví dụ này, chúng ta tạo ra một header, 2 cột và một footer. Trên màn hình nhỏ hơn, cột sẽ xếp chồng lên nhau
</p>
<p>Resize(Kéo cửa sổ trình duyệt theo chiều ngang) để thấy hiệu ứng Responsive</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan
area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to
its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
CSS flexbox
Flexbox là chế độ bố cục mới trong CSS3
Việc sử dụng flexbox giúp đảm bảo cách hoạt động của phần tử có thể được dự đoán trước, khi bố cục trang phải phù hợp với các kích thước màn hình khác nhau và các thiết bị hiển thị khác nhau.
Nhược điểm: Không hoạt động trong IE10 trở về trước.
Ví dụ về flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Vùng chứa cho flexboxes */
section {
display: -webkit-flex;
display: flex;
}
/* Style menu điều hướng */
nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: #ccc;
padding: 20px;
}
/* Style danh sách bên trong menu */
nav ul {
list-style-type: none;
padding: 0;
}
/* Style nội dung */
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: #f1f1f1;
padding: 10px;
}
/* Style footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - khiến menu và nội dung (bên trong section) xếp chồng lên nhau, thay vì đặt cạnh nhau */
@media (max-width: 600px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Bố cục CSS Flexbox</h2>
<p>Trong ví dụ này, chúng ta tạo ra một header, 2 cột và một footer. Trên màn hình nhỏ hơn, cột sẽ xếp chồng lên nhau
</p>
<p>Resize(Kéo cửa sổ trình duyệt theo chiều ngang) để thấy hiệu ứng Responsive</p>
<p><strong>Note:</strong> Flexbox không hỗ trợ IE10 trở về trước.</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan
area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to
its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
CSS grid view
Bố cục CSS grid cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế trang web dễ dàng hơn mà không phải sử dụng float và positioning (xác định vị trí).
Nhược điểm: Không hoạt động trên IE và Edge 15 trở về trước.
Trích nguồn từ: (https://www.w3schools.com/html/html_layout.asp)
