Bước 1: Dựng khung các khối thẻ div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
</style>
</head>
<body>
<div id="khoi_1" >1. Khối đầu trang</div>
<div id="khoi_2" >2. Khối menu trái</div>
<div id="khoi_3" >3. Khối nội dung ở giữa</div>
<div id="khoi_4" >4. Khối sidebar bên phải</div>
<div id="khoi_5" >5. Khối cuối trang</div>
</body>
</html>Bước 2: Viết css riêng cho từng khối, cho vào đầu đoạn css
/* Viết css riêng cho từng khối */
#khoi_1{background-color: red;}
#khoi_2{background-color: blue;}
#khoi_3{background-color: #eee;}
#khoi_4{background-color: green;}
#khoi_5{background-color: cyan;}Xong bước này chạy thử để kiểm tra màu sắc các khối
Bước 3: Thiết lập chung cho các thẻ
/* Thiết lập chung*/
* {
/*Thuộc tính box-sizing: nếu là border-box thì sẽ tính cả border vào bên trong kích thước của khối. VD: Kích thước của khối là 100px, border là 5px thì tổng kích thước vẫn là 100px, và cái border nó nằm ở bên trong khối. Nếu giá trị thuộc tính này là: content-box thì 100px kia phải cộng thêm 2 lần 5px ở 2 bên của border và tổng chiều rộng của khối là 110px; */
box-sizing: border-box;
/* tham khảo https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
}
[class*="col-"] {
/* cách chọn mới của css3: Chọn tất cả các thẻ có thuộc tính class có chứa chuỗi col-
mục đích: Cột nào cũng phải có thuộc tính float và có border.
*/
float: left;
border: 1px solid yellow;
}Viết các class cho các thẻ div để nhận hiệu ứng css
<div id="khoi_1" class="col-12" >1. Khối đầu trang</div>
<div id="khoi_2" class="col-3" >2. Khối menu trái</div>
<div id="khoi_3" class="col-6" >3. Khối nội dung ở giữa</div>
<div id="khoi_4" class="col-3" >4. Khối sidebar bên phải</div>
<div id="khoi_5" class="col-12" >5. Khối cuối trang</div>OK, sau khi hoàn thiện code thì bạn có thể chạy file để xem kết quả.
Chúc các bạn thành công!