---------
Phần 11. Tạo
layout sử dụng thẻ div
Tiếp tục làm một giao diện web nữa bằng HTML và CSS, cùng
làm theo phần hướng dẫn của tác giả ThachPham.
Vào đây để tải về hình ảnh và tập tin reset CSS https://drive.google.com/open?id=0B4FOelgeetqJYnlJYlZudjctX2M
hoặc: http://thachpham.com/web-development/html-css/thuc-hanh-tao-layout-css-don-gian.html
Xem clip và làm theo từng bước.
Qua clip để ý một số thứ:
- Phân tích giao diện để xác định các vùng
- Dùng thẻ div để chia các vùng, lưu ý khi nào dùng class,
khi nào dùng id
- Thực hiện CSS dựa trên các class, id của div
- Viết chú thích khi lập trình
- Chia cột bằng float và position
- Sử dụng position
- Sử dụng chức năng Inspect của developer tools
- Viết nội dung HTML trước, thực hiện CSS sau
- Sử dụng đơn vị đo kích thước là “em”
- Đọc thêm về box-sizing để biết một số tùy chọn liên quan
đến kích thước của các phần tử HTML. Ví dụ: thiết lập box-sizing là border-box để
cố định kích thước của một box, khi thực hiện thiết lập border và padding.
* {
box-sizing:
border-box;
-moz-box-sizing:
border-box;
-webkit-box-sizing:
border-box;
}
- Để chọn phần tử cuối cùng trong một tập hợp, sử dụng
last-child, ví dụ chọn col cuối của row:
.row .col:last-child {}.
- Cách làm menu con: cho position của cha là relative,
#menu ul li {
line-height:
2.9em;
height: 2.9em;
transition: all
1s;
-moz-transition:
all 1s;
-webkit-transition:
all 1s;
position:
relative;
}
Thiết lập cho menu con
#menu .sub-menu {
display: none;
position:
absolute;
top: 0;
left: 150px; /*
hiển thị ở bên phải của menu cha */
background-color:
#191818;
width: 150px;
}
Cho hiển thị menu con:
#menu ul li:hover .sub-menu {
display: block;
}
-----------
Cập nhật [1/9/2020]
-----------
Xem thêm:
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (12) - Viết mã chuyên nghiệp với code editor
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (12) - Viết mã chuyên nghiệp với code editor