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

CSS - CSS3      2019-11-15 10:57:11    Thêm vào bộ sưu tập

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ả. Nếu chưa chạy được bạn có thể đối chiếu code full tại đây.

Chúc các bạn thành công!


©SPX 2015-2020
Nội dung đã đăng ký bản quyền và quản lý bởi DMCA.com Protection Status