Dự án bố cục trang thực chiến (phần 1)

Tạo một website cho một người làm sô cô la

Anna Ambrose là chủ và là người sản xuất của Pandaisia Chocolates, một shop bán sô cô la nằm
ở Essex Vermont. Bạn đã được yêu cầu hỗ trợ trên thiết kế lại wesite của công ty. Anne đã cung
cấp cho bạn ba trang từ website để bắt đầu công việc của bạn. Chị đã viết tất cả các nội dung,
, biên dịch ảnh va đồ họa cần thiết và viết một vài style màu và text. Chị ấy cần bạn hoàn thành
dự án bằng cách thiết kế bố cục trang sử dụng đặc tính bố cục CSS.

Overview dự án

 

dự án

(1) Để trung tâm hóa theo chiều ngang một phần tử block, thiết lập margin trái và phải thành auto.
(2) Đặc tính width định nghĩa độ rộng của một phần tử, đặc tính max-width thiết lập độ rộng có
thể tối đa của nó, đặc tính min-width thiết lập độ rộng tối thiểu của nó.
(3) Tất cả các vật trong horizontal list được làm cho trôi sang bên trái để tạo các cột.
(4) Đặc tính display định nghĩa một phần tử có bố cục như thế nào.
(5) Đặc tính float lấy một đối tượng ra khỏi dòng tài liệu thông thường và làm trôi nó sang
margin bên trái hay bên phải của phần tử chứa nó.
(6) Đặc tính clear hiển thị phần tử chỉ khi đối tượng được làm cho trôi trái, phải và cả hai
đã được giải phóng.
(7) Phần cột trái và phải được làm cho trôi với độ rộng 33% và 67% tương ứng.
(8) Danh sách vertical navigation và phần contact info được làm cho trôi như các cột riêng rẽ.
(9) Để ngăn chặn một phần tử chỉ chứa các phần tử được làm cho trôi khỏi collapse, sử dụng
pseudo – element after và đặc tính content để tạo một phần tử giữ chỗ.

Ảnh overview bố cục trang với các phần tử trôi:

overview

(1) Page body được trung tâm hóa theo chiều ngang bên trong cửa sổ trình duyệt.
(2) Các vật list theo chiều ngang được làm cho trôi thành các cột riêng rẽ.
(3) Khu vực trái và phải được làm cho trôi thành các cột riêng rẽ.
(4) Các nội dung của page footer được làm cho trôi thành các cột riêng rẽ.

DOWNLOAD EXERSISE FILE Ở ĐÂY:

CLICK HERE

Chia sẻ

Leave a Reply

Your email address will not be published. Required fields are marked *