Khóa học HTML - Bài 18 - Xử lý LAYOUT - Lớp học Vi Tính - khóa học vi tính văn phòng

Phần tử trong HTML Layout

Các trang web hiện nay thường hiển thị nội dung trên nhiều cột (như các trang tin tức).

HTML5 đưa ra định nghĩa mới về các phần trên trang web :

<header> - Định phần đầu của trang web
<nav> - Định phần chứa các liên kết điều hướng(menu)
<section> - Chứa các phần văn bản
<article> - Chứa mục bài viết
<aside> - Chứa phần thanh 02 bên trái và phải
<footer> - Chứa phần cuối trang web
<details> - Chứa các chi tiết bổ sung
<summary> - Chứa tiêu đề của phần <details>

Các kỹ thuật trong HTML

Có 04 kỹ thuật để tạo trang web có nhiều cột. Mỗi cách đều có ưu và nhược:

Bảng HTML
Dùng thuộc tính CSS float
CSS framework
CSS flexbox

Chọn kỹ thuật nào?

Bảng

Thẻ <table> không được dùng để thiết kế layout! Mục đích của thẻ <table> là để hiển thị dữ liệu dạng bảng. Vì vậy nếu bạn dùng <table> để thiết kế layout sau này code sẽ bị rối.

CSS

Nếu bạn muốn thiết kế giao diện nhanh, bạn có thể dùng CSS framework, lví dụ: W3.CSS hoặc Bootstrap.

Thuộc tính CSS Floats

Ta hoàn toàn có thể thiết kế toàn bộ layout của 01 trang web bằng cách sử dụng thuộc tính CSS float.

Float rất dễ học – bạn chỉ cần nhớ cách làm "nổi" 01 đối tượng và cách ẩn nó đi.

Điểm bất lợi: nó có thể làm phức tạp hóa phần thiết kế layout.

Ví dụ về Float

<!DOCTYPE html>

<html>

<head>

<style>

div.container {

width: 100%;

border: 1px solid gray;

}

header, footer {

padding: 1em;

color: white;

background-color: green;

clear: left;

text-align: center;

}

nav {

float: left;

max-width: 160px;

margin: 0;

padding: 1em;

}

nav ul {

list-style-type: none;

padding: 0;

}

nav ul a {

text-decoration: none;

}

article {

margin-left: 170px;

border-left: 1px solid gray;

padding: 1em;

overflow: hidden;

}

</style>

</head>

<body>

<h1>Các thành phố lớn Việt Nam</h1>

</header>

<nav>

<ul>

</ul>

</nav>

<p>Thành phố Hồ Chí Minh nghe (trợ giúp·chi tiết) (hiện nay vẫn được gọi phổ biến với tên cũ là Sài Gòn) là thành phố lớn nhất Việt Nam đồng thời cũng là đầu tàu kinh tế[5] và là một trong những trung tâm văn hóa, giáo dục quan trọng nhất của nước này. Hiện nay, thành phố Hồ Chí Minh là thành phố trực thuộc Trung ương cùng với thủ đô Hà Nội là đô thị loại đặc biệt của Việt Nam.</p>

<p>Nằm trong vùng chuyển tiếp giữa miền Đông Nam Bộ và đồng bằng sông Cửu Long, địa hình thành phố thấp dần từ Bắc xuống Nam và từ Tây sang Đông. Vùng cao nằm ở phía bắc - Đông Bắc và một phần Tây Bắc, trung bình 10 đến 25 mét. Xen kẽ có một số gò đồi, cao nhất lên tới 32 mét như đồi Long Bình ở quận 9. Ngược lại, vùng trũng nằm ở phía nam - Tây Nam và Ðông Nam thành phố, có độ cao trung bình trên dưới 1 mét, nơi thấp nhất 0,5 mét. Các khu vực trung tâm, một phần các quận Thủ Đức, quận 2, toàn bộ huyện Hóc Môn và quận 12 có độ cao trung bình, khoảng 5 tới 10 mét.</p>

</article>

</div>

</body>

</html>

CSS Flexbox

Flexbox là 1 chế độ layout mới trong CSS3.

Nó đảm bảo trang web hiển thị đúng với nhiều kích cỡ màn hình khác nhau và nhiều thiết bị khác nhau.

Điểm bất lợi: không hoạt động được ở version IE10 và phiên bản cũ hơn.

Bạn có thể đọc thêm về CSS Flexbox.

Ví dụ Flexbox:

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-flow: row wrap;

flex-flow: row wrap;

text-align: center;

}

.flex-container > * {

padding: 15px;

-webkit-flex: 1 100%;

flex: 1 100%;

}

.article {

text-align: left;

}

header {background: green;color:white;}

footer {background: #aaa;color:white;}

.nav {background:#eee;}

.nav ul {

list-style-type: none;

padding: 0;

}

.nav ul a {

text-decoration: none;

}

@media all and (min-width: 768px) {

.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}

.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}

footer {-webkit-order:3;order:3;}

}

</style>

</head>

<body>

<h1>Các thành phố lớn Việt Nam</h1>

</header>

<ul>

</ul>

</nav>

</article>

</div>

</body>

</html>

Tác giả: #drM

Nguồn: Sưu Tầm

NTM Solutions

Lớp học Vi Tính

Chủ Nhật, 4 tháng 12, 2016