-
Dựa trên menu.html bài cũ, tạo
menu-enhanced.html
- Thêm hiệu ứng hover (đổi màu nền, màu chữ)
- Active state khi click
-
Thêm vạch ngăn cách giữa các li
(border/pseudo-element)
- Dùng :first-child/:last-child xóa vạch thừa
-
Dùng ::before thêm icon unicode trước menu item
-
Dựa trên form.html, tạo form-interactive.html
- Input đổi màu viền khi focus
- Input đổi màu viền đỏ khi invalid (có text)
-
Dùng ::after thêm dấu sao đỏ (*) cho field bắt
buộc
- Hover/Active cho nút submit
- Style container khi form-focus
- Tạo pricing-table.html
-
Thiết kế 3 khối (Basic, Pro, Premium) cạnh nhau
- Hover nổi khối (box-shadow)
- Dùng :nth-child(2) nổi bật gói giữa
-
Dùng ::before thêm icon check trước tính năng
-
Tạo blog-post.html (tiêu đề, ảnh, nội dung,
comment)
- Dùng ::first-letter làm drop cap
- Dùng ::first-line nổi bật dòng đầu
- Tùy chỉnh màu ::selection
-
Dùng ::before tạo dấu ngoặc kép cho blockquote
- Dùng :not() style heading trừ h1
- Hover effect cho comment
- Dùng :nth-of-type() tạo kiểu xen kẽ