Website Layout
01 trang web thường được chia thành các phần như: header, menus, phần chứa nội dung và footer.
Header
01 header thường nằm ở đỉnh trang web (hoặc bên phải ngay dưới
menu điều hướng top). Nó thường chứa 01 logo hoặc tên trang web.
Ví dụ:
.header
{
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
Navigation Bar
01 thanh điều hướng chứa danh sách các liên kết để giúp người
dùng di chuyển xuyên suốt trang web.
Ví dụ:
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Content
Giao diện của phần này thường tùy vào đối tượng người dùng.
Giao diện thường gặp nhất là 01 hay kết hợp chúng lại) như sau:
·
01 cột (dùng cho trình duyệt di động)
·
02 cột (dùng cho máy tính bảng và laptop)
· 03 cột (dùng cho máy tính bàn)
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each
other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Mẹo 01: để tạo 01 layout 02 cột, thay đổi thuộc tính
width thành 50%. Để tạo layout 04 cột, thay đổi width thành 25%.
Mẹo 02: thêm 01 cách để tạo layout dạng cột là dùng
CSS Flexbox.
Cột không đều nhau
Nội dung chính là phần lớn nhất và quan trọng nhất trên
trang của bạn.
Nó thường có bề rộng cột không đều nhau, vì thế hầu hết các
khoảng trống được dành cho nội dung chính. Nội dung cạnh bên (nếu có) thường
dùng như 01 điều hướng thay thế hoặc để xác định thông tin thích hợp với nộ
dung chính.
Thay đổi bề rộng nếu bạn thích, chỉ nhớ rằng tất cả cộng lại
phải bằng 100%.
Ví dụ:
.column
{
float: left;
}
/* Left and right
column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Responsive layout
- makes the three columns stack on top of each other instead of next to each
other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
Footer
Footer được đặt dưới cùng của trang web. Nó thường chứa
thông tin như bản quyền, liên hệ…
Ví dụ:
.footer
{
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
Responsive Website Layout
Bằng cách dùng vài đoạn mã CSS như trên, chúng ta tạo ra 01
layout trang web responsive, có thể thay đổi qua lại giữa layout 02 cột và 01 cột
toàn màn hình tùy vào bề rộng màn hình thiết bị.
Nếu vẫn chưa rõ các bạn xem thêm video clip sau:
Xem MỤC LỤC BÀI VIẾT VỀ CSS
- Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
- Trang fan page: https://www.facebook.com/lophocvitinhcom
- Trang web: http://lophocvitinh.com
Không có nhận xét nào:
Đăng nhận xét