www.hoasen.edu.

vn

CHƯƠNG 4

THIẾT KẾ BỐ CỤC TRANG

WEB BẰNG DIV + CSS
GV điều phối: ThS. PHẠM THỊ THANH TÂM
Email: tam.phamthithanh@hoasen.edu.vn

uu
 www.hoasen.edu.vn

NỘI DUNG
1 • GIỚI THIỆU DIV

• MỘT SỐ THUỘC TÍNH CƠ BẢN

2 CỦA CSS DÙNG ĐỂ THIẾT KẾ
BỐ CỤC CỦA TRANG WEB
• VÍ DỤ SỬ DỤNG CSS LOẠI 1 ĐỂ
3 THIẾT KẾ BỐ CỤC CỦA TRANG
WEB
• VÍ DỤ SỬ DỤNG CSS LOẠI 3 ĐỂ
4 THIẾT KẾ BỐ CỤC CỦA TRANG
WEB
• VÍ DỤ THIẾT KẾ BỐ CỤC
5 TRANG WEB CHO WEBSITE
uu SHOP HOA TƯƠI
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
2
 www.hoasen.edu.vn

1.GIỚI THIỆU DIV

 <DIV>…</DIV>: viết tắt của từ division (sự phân
chia): là phần từ HTML dùng để chứa các phần từ
khác (p, img, table, div,…)
 DIV thường được dùng để làm layout cho website
(thay cho cách dùng table truyền thống)
 Ưu điểm:
 Tốc độ load trang web trên trình duyệt nhanh hơn
 Dễ dàng thay đổi giao diện của website (chỉ cần
thay đổi định dạng CSS mà không cần phải viết lại
mã HTML)
uu 3
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

1.GIỚI THIỆU DIV (tt)

 Ví dụ:

uu 4
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

2. MỘT SỐ THUỘC TÍNH QUAN TRONG

CỦA CSS DÙNG ĐỂ THIẾT KẾ BỐ CỤC
TRANG WEB
Top
Border Margin
Padding

Left Nội dung chính Right

Bottom
uu 5
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

2. MỘT SỐ THUỘC TÍNH QUAN TRONG

CỦA CSS DÙNG ĐỂ THIẾT KẾ BỐ CỤC
TRANG WEB (tt)
 marign:
 Dùng để xác định khoảng cách giữa nó và đối
tượng xung quanh
 Có thể xác định giá trị cho cả 4 hướng top, right,
bottom, left (thuận chiều kim đồng hồ bắt đầu từ
top)
 Ví dụ 1: margin:10px;
(khoảng cách cả 4 hướng top, right, bottom, left đều là 10px)

uu 6
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

2. MỘT SỐ THUỘC TÍNH QUAN TRONG

CỦA CSS DÙNG ĐỂ THIẾT KẾ BỐ CỤC
TRANG WEB (tt)
 Ví dụ 2
margin: 10px 5px 0px 5px;
tương đương:
margin-top: 10px; margin-right: 5px;
margin-bottom: 0px; margin-left: 5px;
 Ví dụ 3
margin: 0px 10px;
tương đương: margin-top = margin-bottom = 0px
margin-left = margin-right = 10px

uu 7
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

2. MỘT SỐ THUỘC TÍNH QUAN TRONG

CỦA CSS DÙNG ĐỂ THIẾT KẾ BỐ CỤC
TRANG WEB (tt)
 padding: định khoảng cách từ đường viền của DIV
đến nội dung bên trong
(Cách sử dụng tương tự như margin)
 float: chế độ nổi của DIV này so với DIV khác (dùng
để canh lề của DIV hiện tại so với DIV chứa nó)
 clear: xóa bỏ ảnh hưởng của các float của các DIV
phía trước (áp dụng khi DIV này nằm dưới DIV khác
có thuộc tính float)

uu 8
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

3. VÍ DỤ SỬ DỤNG CSS LOẠI 1 ĐỂ

THIẾT KẾ BỐ CỤC TRANG WEB

uu 9
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

3. VÍ DỤ SỬ DỤNG CSS LOẠI 1 ĐỂ

THIẾT KẾ BỐ CỤC TRANG WEB (tt)

uu 10
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

3. VÍ DỤ SỬ DỤNG CSS LOẠI 1 ĐỂ

THIẾT KẾ BỐ CỤC TRANG WEB (tt)

uu 11
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

4. VÍ DỤ SỬ DỤNG CSS LOẠI 3 ĐỂ

THIẾT KẾ BỐ CỤC TRANG WEB

uu 12
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

5. VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB

File style.css CHO WEBSITE SHOP HOA TƯƠI

uu 13
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

5. VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB

CHO WEBSITE SHOP HOA TƯƠI

File style.css

uu 14
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

5. VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB

CHO WEBSITE SHOP HOA TƯƠI (tt)
File template.html

uu 15
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

5. VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB

CHO WEBSITE SHOP HOA TƯƠI (tt)

uu 16
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

5. VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB

CHO WEBSITE SHOP HOA TƯƠI (tt)

Kết quả hiển thị

trên trình duyệt

uu 17
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

HỎI - ĐÁP

Chúc các bạn snh viên đạt kết quả tốt

uu 18
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS