Thiết kế trang web tương tác - Giao diện lưới

Giao diện lưới là gì?

Nhiều trang web đều dựa trên giao diện lưới (grid-view), điều này có nghĩa là trang được chia thành một số cột:

Khi thiết kế trang web, việc sử dụng giao diện lưới rất hữu ích. Điều này giúp dễ dàng hơn trong việc đặt phần tử trên trang.

Giao diện lưới tương tác thường có 12 cột, tổng chiều rộng là 100% và sẽ co lại và mở rộng khi điều chỉnh kích thước cửa sổ trình duyệt.

Xây dựng giao diện lưới tương tác

Hãy bắt đầu xây dựng giao diện lưới tương tác.

Trước tiên, hãy đảm bảo rằng tất cả các phần tử HTML box-sizing Thuộc tính được thiết lập thành border-boxĐiều này sẽ đảm bảo rằng tổng chiều rộng và chiều cao của phần tử bao gồm lề trong (đệm) và viền.

Vui lòng thêm mã sau vào CSS:

* {
  box-sizing: border-box;
}

Vui lòng truy cập CSS Box Sizing Đọc thêm về thuộc tính box-sizing trong chương.

Dưới đây là ví dụ về một trang web tương tác đơn giản, bao gồm hai cột:

25%
75%

thực例

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

Thử ngay

Nếu trang web chỉ chứa hai cột, ví dụ trên sẽ rất tốt.

nhưng, chúng tôi muốn sử dụng lưới nhìn thấy được 12 cột để kiểm soát trang web tốt hơn.

đầu tiên, chúng tôi phải tính toán phần trăm của một cột: 100% / 12 cột = 8.33%.

thì, chúng tôi sẽ tạo một lớp cho mỗi cột trong 12 cột, tức là class="col-" và một số số, số này xác định số cột mà phần này nên vượt qua:

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%;}

Thử ngay

tất cả các cột này nên trôi qua sang trái và có lề trong 15px:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

mỗi dòng nên được bao bọc trong <div> trong đó tổng số cột trong dòng luôn là 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

tất cả các cột trong dòng đều trôi qua sang trái, vì vậy chúng sẽ rời khỏi dòng trang và đặt các yếu tố khác, như thể các cột đó không tồn tại. Để tránh điều này, chúng tôi sẽ thêm樣式 xóa dòng:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

chúng tôi muốn thêm một số樣式 và màu sắc để làm cho nó trông đẹp hơn:

thực例

html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: #0099cc;
}

Thử ngay

Lưu ý, khi bạn điều chỉnh kích thước cửa sổ trình duyệt rất nhỏ, trang web trong ví dụ sẽ không trông đẹp. Trong chương tiếp theo, bạn sẽ học cách giải quyết vấn đề này.