Thiết lập một bố cục lưới
Bạn đã học thiết lập một bố cục lưới ở học phần sau:
https://giaiphapwebtl.vn/thiet-ke-trang-voi-bo-cuc-luoi-phan-4/
Thêm các phần tử div cho bố cục lưới này tới About Pandaisia Chocolates page.
Để tạo About Pandaisia Chocolates page:
1. Sử dụng editor của bạn để mở file pc_about_txt.html từ thư mục html03>tutorial.
Nhập tên của bạn và ngày tháng vào phần comment và lưu file như pc_about.html.
Anne đã thêm cùng header sử dụng cho Pandaisia Chocolates home page vào page này. Sử dụng
cùng các header tags giữ một header ổn định cho mỗi trang, và vì vậy, một cái nhìn và cảm giác
ổn định qua các pages trong website.
2. Dưới tag </header> đóng, điền các phần tử div sau cho dòng đầu tiên trong lưới.
<div class=”row”>
</div>
3. Tiếp theo, điền các phần tử div sau cho dòng thứ hai chứa 2 cột bên trong lưới 2×2 nested trong cột
đầu tiên.
<div class=”row”>
<div class=”col-2-3”>
<div class=”row”>
<div class=”col-1-2”>
</div><div class=”col-1-2”>
</div></div>
<div class=”row”>
<div class=”col-1-2”>
</div>
<div class=”col-1-2”>
</div></div>
</div>
<div class=”col-1-3”>
</div>
</div>
4. Cuối cùng, điền các phần tử div sau cho dòng thứ 3 của lưới:
<div class=”row”>
</div>
5. Giành một vài thời gian xem lại code, đảm bảo rằng nó khớp cấu trúc và các tên classes.
6. Lưu lại các thay đổi của bạn vào file nhưng không đóng nó.