Giao trinh DH FPT_Slide6

20 73 0
Giao trinh DH FPT_Slide6

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

BËI LËM VIỆC VỚI THËNH PHẦN MỞ RỘNG CỦA CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt NHẮC LẠI BËI TRƯỚC !   Lˆm việc với c‡c thuộc t’nh CSS3: !   Border-radius !   Border-image !   Gradient !   Transform, transition, animation !   Lˆm việc với font web !   Ch•n nhiều h“nh với CSS3 Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 (Multicolumns) vˆ cấu trœc hộp Flex (Flexboxes) !   CSS3 user interface Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 MEDIA QUERIES CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 MEDIA QUERIES !   Đối với tất c‡c tr“nh duyệt/ thiết bị giao tiếp với m‡y chủ lưu trữ website vˆ tự đị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ả n ng 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 tr“nh duyệt, thiết bị, thiết bị định hướng (phong cảnh/ ch‰n dung), độ ph‰n giải Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 MEDIA QUERIES !   Sử dụng CSS3 media queries để cung cấp layout ph• hợp với cho layout mobile @media only screen and (max-width: 480px) { body { padding: 5px; background-color:#FFF; backgroundimage:url(images/smoothieworld_logo_mobile.jpg); backgroundrepeat: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  Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 MEDIA QUERIES !   Quy định chiều rộng trang hiển thị tr•n thiết bị @media only screen and (max-device-width: 480px) Kết quả hiển thị trên trình duyệt của iPhone  Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 hiển thị tr•n tr“nh duyệt m‡y tnh ! Gi !: Ơ Nn c, nn gần đầu mˆn h“nh để dễ truy cập ¥  Lặp lại iều hướng ph’a trang ¥  Với thiết bị cảm ứng, sử dụng k’ch thước lớn cho link 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 - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 MEDIA QUERIES !   V’ dụ: #mainnav {height: auto;} #mainnav li { float: none; width: auto; text-align: left; border-top: 1px grey solid; border-bottom: 1px grey solid; } Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 LAYOUT CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 LAYOUT !   Layout nhiều cột sử dụng CSS3: !   CSS3 cung cấp c‡c thuộc t’nh để thuận tiện cho việc thiết kế layout dạng nhiều cột: ¥  Column-count: quy định cụ thể số lượng c‡c cột phần tử chia thˆnh ¥  Column-width: quy định cụ thể chiều rộng c‡c cột ¥  Column-gap: quy định khoảng c‡ch c‡c cột ¥  Column-rule: lˆ thuộc t’nh viết tắt, cho phŽp thiết lập tất c‡c thuộc t’nh: chiều rộng, style, mˆu sắc c‡c cột Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 11 https://fb.com/tailieudientucntt CSS3 LAYOUT !   C‡ch thiết lập: #introduction-content { width: 600px; -moz-column-count: 3; -webkit-columncount: 3; column-count: 3; } Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 12 https://fb.com/tailieudientucntt CSS3 LAYOUT !   Thiết lập layout dạng hộp Flexible (hộp linh hoạt): !   Lˆ dạng bố cục CSS3 !   Đại diện cho bốn dạng layout ang hỗ trợ CSS2.1 #introduction-content { width: 600px; height: 150px; border: 1px solid #821738; display: -webkit-box; -webkit-box-orient: horizontal; display: moz-box; -moz-box-orient: horizontal; } Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 13 https://fb.com/tailieudientucntt CSS3 USER INTERFACE (GIAO DIỆN NGƯỜI DôNG) CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 USER INTERFACE !   CSS3 cung cấp số t’nh n ng ph’a người d•ng: !   Thay đổi k’ch thước thˆnh phần tr•n trang !   Thay đổi k’ch thước hộp !   Ph‡c thảo !   C‡c thuộc t’nh quy định: !   Resize !   box-sizing !   outline-offset Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 15 https://fb.com/tailieudientucntt CSS3 USER INTERFACE !   CSS3 resize: !   Quy định thˆnh phần c— thể hay kh™ng thể thay đổi k’ch thước người d•ng show_boxre{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 16 https://fb.com/tailieudientucntt CSS3 USER INTERFACE !   CSS3 box-sizing: !   Cho x‡c định yếu tố ph• hợp với khu vực CSS3: div.Container { width:30em; border:1em solid;} div.box{box-sizing: border-box; -moz-box-sizing:border-box; -webkit-boxsizing:border-box; width:50%; border:1em solid red; float:left;} HTML: This div occupies the left half. This div occupies the right half. Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 17 https://fb.com/tailieudientucntt CSS3 USER INTERFACE !   CSS3 Outline Offset: !   Quy định đường bi•n, bao ph’a b•n ngoˆi đường bi•n mặc định !   c‡ch tạo đường outline: ¥  kh™ng kh™ng gian ¥  Kh™ng phải dạng h“nh chữ nhật Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 18 https://fb.com/tailieudientucntt CSS3 USER INTERFACE !   CSS3 Outline Offset: div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; }

Note: Internet Explorer and Opera does not support the outline-offset property.

This div has an outline border 15px outside the border edge. Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 19 https://fb.com/tailieudientucntt TỔNG KẾT !   Sử dụng CSS3 media queries để thiết kế layout ph• hợp với tr“nh duyệt, thiết bị !   CSS3 giœp người thiết kế tạo dạng layout nhiều cột Giœp bố tr’ th™ng tin thuận tiện, r› rˆng cho người d•ng !   CSS3 cung cấp số thuộc t’nh để tương t‡c với người d•ng duyệt web Người d•ng c— thể thay đổi k’ch thước c‡c thˆnh phần tr•n trang Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 20 https://fb.com/tailieudientucntt ... CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 MEDIA QUERIES !   Đối với tất c‡c tr“nh duyệt/ thiết bị giao tiếp với m‡y chủ lưu trữ website vˆ tự định dạng với user agent String !   CSS3 media queries:... phần mở rộng CSS3 CuuDuongThanCong.com 13 https://fb.com/tailieudientucntt CSS3 USER INTERFACE (GIAO DIỆN NGƯỜI DôNG) CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 USER INTERFACE

Ngày đăng: 27/12/2019, 19:00

Từ khóa liên quan

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan