Bố cục trang web một cột đơn giản trong CSS
Trong bài học này, chúng ta sẽ thực hành tạo bố cục trang web một cột đơn giản. Hãy, ví dụ, tạo một bố cục như thế này:
Hãy bắt đầu triển khai. Mỗi bố cục thông thường
bắt đầu với một thẻ div chung có tên là
wrapper, chứa toàn bộ phần còn lại của trang web:
<div id="wrapper">
</div>
Trong trường hợp của chúng ta, wrapper sẽ được căn giữa màn hình:
#wrapper {
width: 800px;
margin: 50px auto;
}
Nó cũng sẽ có đường viền:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Bây giờ hãy tạo cấu trúc chính của trang. Nó sẽ bao gồm menu và nội dung chính - content:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Hãy thêm nội dung cho các khối của chúng ta:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Bây giờ có thể thêm style cho các khối của chúng ta. Hãy thêm style cho menu:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
Và bây giờ hãy thêm style cho các phần tử nội dung:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Bây giờ chúng ta có thể tập hợp tất cả mã lại với nhau:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Lời khuyên 1
Thuận tiện nhất là đặt khoảng cách từ trên xuống dưới.
Ví dụ, chúng ta có menu và nội dung,
và giữa chúng - khoảng trống. Rõ ràng,
khoảng trống này có thể được tạo bằng khoảng cách dưới
của menu, khoảng cách trên của nội dung,
hoặc ảnh hưởng đồng thời của cả hai. Trong trường hợp này
tốt hơn nên đặt khoảng cách dưới cho menu, còn nội dung
thì bỏ padding và margin mặc định
của h1.
Lời khuyên 2
Các phần tử con không nên tạo khoảng cách giữa
các phần tử cha. Ví dụ, chúng ta có menu.
Khoảng cách dưới của menu này có thể được tạo
bằng margin của div chứa menu, hoặc margin
của các liên kết. Tốt hơn nên chọn phương án đầu tiên, vì
các liên kết không nên hoạt động "vượt qua đầu"
phần tử cha.
Lời khuyên 3
Giả sử giữa hai phần tử có khoảng cách
và trong trường hợp này trực quan không có sự khác biệt,
nên chọn gì cho khoảng cách - margin hay padding.
Trong trường hợp này hãy chọn margin, vì
chính nó phải tạo khoảng cách giữa
các phần tử.
