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 <ul> kết hợp với <li> để tạo danh sách
 Thuộc tính CSS list-style-type giúp tạo các kiểu danh sách khác nhau
 Các giá trị của 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 <ol> kết hợp với <li> để tạo danh sách
Thuộc tính @type giúp tạo các kiểu danh sách khác nhau

Thuộc tính @start chỉ ra giá trị bắt đầu
Các giá trị của @type gồm
• 1
• 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”


DANH SÁCH ĐỊNH NGHĨA
 <dl>: bắt đầu và kết thúc danh sách định nghĩa

 <dt>: Thuật ngữ cần định nghĩa
 <dd>: Định nghĩa thuật ngữ


 Tạo cấu trúc của một
cuốn sách


TRẮC NGHIỆM


ĐỊNH VỊ TRONG CSS
left

z-index
top


ĐỊNH VỊ
 Định vị là đặt phần tử web tại một vị trí mong muốn.
top

left


ĐỊNH VỊ
 Web cho phép định vị theo không gian 3 chiều dựa vào các thuộc
tính CSS sau đây
•
•

•
•
•
•

Position: định vị
Left: trái
Right: phải
Top: trên
Bottom: dưới
Z-index: xếp chồng

top
left

right
z-index

bottom


VÍ DỤ 1 ĐỊNH VỊ

top:100px

left:50px


VÍ DỤ 2 ĐỊNH VỊ

right:50px
bottom:30px


CƠ CHẾ ĐỊNH VỊ
 Các giá trị của thuộc tính position được sử dụng để xác định cơ chế
định vị gồm
• position:static: tĩnh (mặc định)
• Định vị theo sự sắp xếp tự nhiên của HTML

• position:absolute: tuyệt đối
• Định vị tuyệt đối theo các thuộc tính css left, right, bottom, top so với màn hình hoặc
thẻ chứa nếu chế độ định vị của thẻ chứa khác static

• position:relative: tương đối
• Định vị tương đối theo các thuộc tính css left, right, bottom, top so với vị trí tự nhiên của
HTML

• position:fixed: cố định khi cuộn màn hình
• Định vị cố định theo các thuộc tính css left, right, bottom, top so với màn hình hoặc thẻ
chứa nếu chế độ định vị của thẻ chứa khác static


CƠ CHẾ ĐỊNH VỊ


ĐỊNH VỊ TUYỆT ĐỐI THEO THẺ CHỨA
 Muốn định vị tuyệt đối theo thẻ chứa thì
• Định vị của thẻ chứa phải khác static
• Định vị của thẻ bị chứa phải là absolute.

ỨNG DỤNG ĐỊNH VỊ







Định vị tĩnh
Định vị tuyệt đối
Định vị tương đối
Định vị cố định


TRẮC NGHIỆM


BÀI 4 (PHẦN II):

ĐỊNH VỊ & THIẾT KẾ MENU
XÂY DỰNG TRANG WEB
ĐỊNH VỊ VÀ THIẾT KẾ MENU