Ngu ngơ học làm web (11) - Tạo layout sử dụng thẻ div

tiếp theo của: Ngu ngơ học làm web (10) - Tìm và sửa lỗi HTML & CSS
---------

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.


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]
-----------