Thực hành trình bày giao diện với lưới 12 cột

Code: Default | Auth: 03cd82

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!