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 :
 |
|
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:
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ề FloatFloat 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.
<!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>
<div
class="container">
<header>
<h1>Các
thành phố lớn Việt Nam</h1>
</header>
<nav>
<ul>
<li><a
href="#">Hồ Chí Minh</a></li>
<li><a
href="#">Hà Nội</a></li>
<li><a
href="#">Đà Nẵng</a></li>
</ul>
</nav>
<article>
<h1>Hồ
Chí Minh</h1>
<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>
<footer>Copyright
© Lophocvitinh.COM</footer>
</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.
Ví dụ Flexbox:Điểm bất lợi: không hoạt động được ở version IE10 và phiên bản cũ hơn.
<!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>
<div class="flex-container">
<header>
<h1>Các thành phố lớn
Việt Nam</h1>
</header>
<nav class="nav">
<ul>
<li><a href="#">Hồ
Chí Minh</a></li>
<li><a href="#">Hà
Nội</a></li>
<li><a href="#">Đà
Nẵng</a></li>
</ul>
</nav>
<article class="article">
<h1>Hồ Chí Minh</h1>
<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>
<p><strong>Thay đổi
kích cỡ để thấy sự khác biệt!</strong></p>
</article>
<footer>Copyright ©
Lophocvitinh.com</footer>
</div>
</body>
</html>
Tác giả: #drM
Nguồn: Sưu Tầm
Không có nhận xét nào:
Đăng nhận xét