bài 5 bố cục trang cơ bản

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ị 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 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 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 5 MỘT SỐ DẠNG BỐ CỤC layout 2 cột 3 cột… Bài 5 - Bố cục trang cơ bản layout 3 cột 4 cột … 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 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 [...]... min-width:…; Bài 5 - Bố cục trang cơ bản 18 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 { text-align:center; } #main_wrapper { width:840px; margin-left:auto; margin-right:auto; text-align:left; } #header { } Bài 5 - Bố cục trang cơ bản #nav { width:18%; float:left; } #content { width:60%; float:left; } #promo { width:22%; float:left; } #footer { clear:both; } 20 BỐ CỤC... toàn trang Bài 5 - Bố cục trang cơ bản 23 BỐ CỤC NỔI & BỐ CỤC TUYỆT ĐỐI BỐ CỤC NỔI (FLOAT LAYOUT) Dễ dàng trong việc căn chỉnh Tránh được hiện tượng xô lệch cột Sử dụng thẻ overflow để tránh hiện tượng xô lệch các cột Overflow: điều khiển cách tác động của thẻ lên nội dung bên trong Sử dụng kèm clear Bài 5 - Bố cục trang cơ bản 25 BỐ CỤC NỔI (FLOAT LAYOUT) auto hidden overflow inherit scroll visible Bài. .. vùng chân (footer) của trang web> > . trong layout 5 MỘT SỐ DẠNG BỐ CỤC layout 2 cột 3 cột… Bài 5 - Bố cục trang cơ bản layout 3 cột 4 cột … 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. 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. { clear:both; } 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