Xem mẫu
- Bài 5
Bố cục trang cơ bản
- NHẮC LẠI BÀI TRƯỚC
Tìm hiểu về box (hộp), cấu trúc box trên một trang
của trang website:
Tầm quan trọng
Kích thước
Vị trí
Thuộc tính của box:
Thuộc tính về nội dung
Thuộc tính về vị trí
Thuộc tính về hiển thị
Bài 5 - Bố cục trang cơ bản 2
- MỤC TIÊU BÀI HỌC
Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
Bài 5 - Bố cục trang cơ bản 3
- MỘT SỐ BỐ CỤC
- BỐ CỤC TRANG (LAYOUT)
Layout thường được chia thành nhiều cột
Rõ ràng trong việc thiết kế CSS
Áp dụng được tính kế thừa
Đảm bảo nội dung được lấp đầy
Không bị xô lệch giữa các box trong layout
Bài 5 - Bố cục trang cơ bản 5
- MỘT SỐ DẠNG BỐ CỤC
2 cột
… layout 3 cột
4 cột
Bài 5 - Bố cục trang cơ bản 6
- BỐ CỤC 2 CỘT
http://blog.jingproject.com/
Bài 5 - Bố cục trang cơ bản 7
- BỐ CỤC 3 CỘT
http://www.amazon.com
Bài 5 - Bố cục trang cơ bản 8
- BỐ CỤC 4 CỘT
http://www.alistapart.com/
Bài 5 - Bố cục trang cơ bản 9
- BỐ CỤC 2 CỘT CHIỀU RỘNG CỐ ĐỊNH
Demo ví dụ trong các file:
2_col.html -> cấu trúc và nội dung trang
2_col.css -> đặt css để tạo layout
text_n_colors.css -> định style và màu cho text
Bài 5 - Bố cục trang cơ bản 10
- BỐ CỤC 3 CỘT THƯỜNG
Không khai báo giá trị width
Sử dụng ràng buộc:
…
max-width:…;
- TỔ CHỨC BOX
main_wrapper
header
nav
content
footer
Bài 5 - Bố cục trang cơ bản 12
- CSS THIẾT LẬP BỐ CỤC 2 CỘT
body { #nav {
text-align:center; width:22%;
} float:left;
#main_wrapper { }
width:840px; #content {
margin-left:auto; width:78%;
margin-right:auto; float:left;
text-align:left; top:0px;
} }
#header { #footer {
} clear:both;
}
Bài 5 - Bố cục trang cơ bản 13
- BỐ CỤC 2 CỘT LINH HOẠT
Không khai báo giá trị width
Sử dụng ràng buộc thiết lập giới hạn kích thước thay
đổi của thẻ:
max-width: thiết lập kích thước lớn nhất
min-width: thiết lập kích thước nhỏ nhất
Bài 5 - Bố cục trang cơ bản 14
- BỐ CỤC LINH HOẠT 2 CỘT
Nội dung co giãn
Bài 5 - Bố cục trang cơ bản
theo chiều rộng 15
- THIẾT LẬP BỐ CỤC 2 CỘT LINH HOẠT
body { #nav {
text-align:center; width:22%;
} width:140px;
#main_wrapper { float:left;
width:840px; }
max-width:960px; #content {
min-width:720px; width:78%;
margin-left:auto; float:left;
margin-right:auto; margin-left:140px;
text-align:left; top:0px;
} }
#header { #footer {
} clear:both;
}
Bài 5 - Bố cục trang cơ bản 16
- BỐ CỤC 3 CỘT THƯỜNG
Bố cục ba cột có chiều rộng cố định làm việc giống
như phiên bản có hai cột.
Chia 100% chiều rộng cho ba cột theo tỷ lệ mong
muốn.
Bài 5 - Bố cục trang cơ bản 17
- BỐ CỤC 3 CỘT THƯỜNG
Không khai báo giá trị width
Sử dụng ràng buộc:
…
max-width:…;
min-width:…;
…
…
- BỐ CỤC 3 CỘT THƯỜNG
promo
Bài 5 - Bố cục trang cơ bản 19
- CSS THIẾT LẬP BỐ CỤC 3 CỘT
body { #nav {
text-align:center; width:18%;
} float:left;
#main_wrapper { }
width:840px; #content {
margin-left:auto; width:60%;
margin-right:auto; float:left;
text-align:left; }
} #promo {
#header { width:22%;
} float:left;
}
#footer {
clear:both;
}
Bài 5 - Bố cục trang cơ bản 20
nguon tai.lieu . vn
