Đang tải... (xem toàn văn)
Lý thuyết lập trình ngôn ngữ html5 và css3 từ cơ bản đến nâng cao phần 6.
BËI 6 LËM VIỆC VỚI THËNH PHẦN MỞ RỘNG CỦA CSS3 NHẮC LẠI BËI TRƯỚC ! Lˆm việc với c‡c thuộc t’nh mới trong CSS3: ! Border-radius ! Border-image ! Gradient ! Transform, transition, animation ! Lˆm việc với font web ! Ch•n nhiều h“nh nền với CSS3 Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3 2 MỤC TIæU BËI HỌC ! Giới thiệu CSS3 Media Queries ! Lˆm việc với CSS3 layout dạng nhiều cột (Multi- columns) vˆ cấu trœc hộp Flex (Flexboxes) ! CSS3 user interface Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3 3 CSS3 MEDIA QUERIES CSS3 MEDIA QUERIES ! Đối với tất cả c‡c tr“nh duyệt/ thiết bị giao tiếp với m‡y chủ lưu trữ website vˆ tự được định dạng với user agent String ! CSS3 media queries: ! H“nh thức nhận biết thiết bị ! Kiểm tra khả nng của người d•ng truy cập vˆo trang web ! Nhận biết (ph‡t hiện) được: chiều cao, chiều rộng của tr“nh duyệt, thiết bị, thiết bị định hướng (phong cảnh/ ch‰n dung), độ ph‰n giải Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3 5 CSS3 MEDIA QUERIES ! Sử dụng CSS3 media queries để cung cấp layout ph• hợp với cho layout mobile Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3 6 @media only screen and (max-width: 480px) { body { padding: 5px; background-color:#FFF; background- image:url(images/smoothieworld_logo_mobile.jpg); background- repeat:no-repeat; } Quy định chiều rộng lớn nhất khi hiển thị : 480px Sử dụng min‐width, max‐width để khai báo chiều rộng hiển thị sẽ chỉ trong khoảng CSS3 MEDIA QUERIES ! Quy định chiều rộng của trang được hiển thị tr•n thiết bị Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3 7 @media only screen and (max-device-width: 480px) Kết quả hiển thị trên trình duyệt của iPhone CSS3 MEDIA QUERIES ! iều hướng tr•n thiết bị di động: ! N•n thiết kế vị tr’ iều hướng đơn giản hơn khi hiển thị tr•n tr“nh duyệt m‡y t’nh ! Gợi !: ¥ N•n c—, n•n để gần đầu mˆn h“nh để dễ truy cập ¥ Lặp lại iều hướng ở ph’a dưới trang ¥ Với thiết bị cảm ứng, sử dụng k’ch thước lớn cho link của iều hướng ¥ Tr‡nh iều hướng từ h“nh ảnh, n•n dựa tr•n danh s‡ch chuyển hướng dạng CSS Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3 8 CSS3 MEDIA QUERIES ! V’ dụ: Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3 9 #mainnav {height: auto;} #mainnav li { float: none; width: auto; text-align: left; border-top: 1px grey solid; border-bottom: 1px grey solid; } CSS3 LAYOUT . Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3 18 CSS3 USER INTERFACE ! CSS3 Outline Offset: Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3 19. trœc hộp Flex (Flexboxes) ! CSS3 user interface Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3 3 CSS3 MEDIA QUERIES CSS3 MEDIA QUERIES ! Đối với