WEB1013 slide4 positioning a menu

BÀI 4: ĐỊNH VỊ & THIẾT KẾ MENU XÂY DỰNG TRANG WEB ĐỊNH VỊ VÀ THIẾT KẾ MENU MỤC TIÊU BÀI HỌC  XÂY DỰNG DANH SÁCH  HIỂU VÀ ÁP DỤNG ĐỊNH VỊ CSS  THIẾT KẾ MENU GIỚI THIỆU DANH SÁCH DANH SÁCH TRÊN WEB DANH SÁCH KHÔNG THỨ TỰ  Sử dụng

kết hợp với
• để tạo danh sách  Thuộc tính CSS list-style-type giúp tạo kiểu danh sách khác  Các giá trị list-style-type gồm • Disc • Chấm tròn đặc • Square • Chấm vuông đặc • Circle • Chấm tròn rỗng • None • Kiểu danh sách DANH SÁCH KHÔNG THỨ TỰ list-style-type:disc list-style-type:circle list-style-type:square list-style-type:none DANH SÁCH LỒNG NHAU DANH SÁCH CÓ THỨ TỰ     Sử dụng
  kết hợp với
  1. để tạo danh sách Thuộc tính @type giúp tạo kiểu danh sách khác Thuộc tính @start giá trị bắt đầu Các giá trị @type gồm • • Số 1, 2, 3… • A, a • Ký tự A, B, C (a, b, c)… • I, i • Số la mã I, II, III (I, ii, iii)… • None • Bỏ kiểu danh sách DANH SÁCH CĨ THỨ TỰ type=“1” type=“i” type=“I” type=“a” type=“A” BÀI (PHẦN II): ĐỊNH VỊ & THIẾT KẾ MENU XÂY DỰNG TRANG WEB ĐỊNH VỊ VÀ THIẾT KẾ MENU THIẾT KẾ MENU THIẾT KẾ MENU  Menu đứng ngang thiết kế nhờ kết hợp • Danh sách khơng thứ tự • Liên kết • CSS THIẾT KẾ MENU ĐỨNG  Menu • Bo góc • Bóng  Menu Item (liên kết) • • • • • Ảnh khơng lặp Chữ hoa nhỏ Màu cam đậm Chiều cao Đường kẻ  Menu Item hover • Đổi ảnh • Màu đỏ • In đậm THIẾT KẾ MENU ĐỨNG
     • có chuột
       •  Thiết kế menu đứng TRẮC NGHIỆM THIẾT KẾ MENU NGANG THIẾT KẾ MENU NGANG Thả
         • THIẾT KẾ MENU CON  Giải pháp • Sub-menu định vị tuyệt đối •
         • hmenu định vị tương đối • Sub-menu hiển thị đưa chuột lên
         • chứa THIẾT KẾ MENU CON Định vị tuyệt đối ẩn Định vị tương đối Hiển thị sub-menu đưa chuột lên
         • chứa submenu  Thiết kế menu ngang  Thiết kế menu TRẮC NGHIỆM TÓM TẮT BÀI HỌC  DANH SÁCH  CĨ THỨ TỰ  KHƠNG THỨ TỰ  ĐỊNH NGHĨA  CƠ CHẾ ĐỊNH VỊ  POSITION  LEFT, TOP, RIGHT, BOTTOM, Z-INDEX  THIẾT KẾ MENU  MENU ĐỨNG  MENU NGANG  MENU CON ... • A, a • Ký tự A, B, C (a, b, c)… • I, i • Số la mã I, II, III (I, ii, iii)… • None • Bỏ kiểu danh sách DANH SÁCH CÓ THỨ TỰ type=“1” type=“i” type=“I” type= a type= A DANH SÁCH ĐỊNH NGH A ... THIẾT KẾ MENU XÂY DỰNG TRANG WEB ĐỊNH VỊ VÀ THIẾT KẾ MENU THIẾT KẾ MENU THIẾT KẾ MENU  Menu đứng ngang thiết kế nhờ kết hợp • Danh sách khơng thứ tự • Liên kết • CSS THIẾT KẾ MENU ĐỨNG  Menu •...  Menu Item (liên kết) • • • • • Ảnh khơng lặp Chữ hoa nhỏ Màu cam đậm Chiều cao Đường kẻ  Menu Item hover • Đổi ảnh • Màu đỏ • In đậm THIẾT KẾ MENU ĐỨNG