Sử dụng nth-child trong css

Bạn có thể sử dụng even (tương ứng với các phần tử chẵn) và odd (tương ứng với các phần tử lẻ) với nth-child. Ngoài ra, bạn còn có thể sử dụng phép tính toán như sau

1 .gallery:nth-child(4n+4) {
2     margin: 0
3 }

Với phép tính trên, các phần tử thứ 4, 8, 12… sẽ được áp dụng thuộc tính margin = 0. Vậy n là gì? Bạn có thể hiểu n là một số tự nhiên bắt đầu bằng 0 (số nguyên không âm). Như vậy, 4n+4 sẽ được hiểu là 4*n + 4, và phép tính sẽ như sau:

4*0 + 4 = 4 (phần tử thứ 4)
4*1 + 4 = 4 (phần tử thứ 8)
4*2 + 4 = 4 (phần tử thứ 12)

Với ví dụ trên, bạn có thể sử dụng 4n thay cho 4n + 4 (Trường hợp đầu tiên 4*0 sẽ không khớp với phần tử nào)

Advertisements

Kính lúp cho hình ảnh zoom sử dụng jquery và CSS3

Hôm nay mình xn giới thiệu tới các bạn một hiệu ứng tuyệt vời. Đó chính là hiệu ứng kính lúp để soi từng cm của ảnh. Cái này bạn nào tích hợp vào trang web quần áo, giầy, điện thoại hay một số đồ trang sức thì quá tuyệt phải không?

23


Bây giờ cúng ta cùng Code nào:

Bước 1: chúng ta xây dựng code html cho nó:

Bước 2: chúng ta style css cho nó:

Bước 3:chúng ta nhúng Script vào nữa là xong:

Hy vọng qua bài viết này các bạn có thêm những ý tưởng mới của mình khi cho những mẫu thiết kế mới

Xem :Demo
Vietnit các bạn thành công !
by: Tran Vo  –  Sưu tập bởi: Ju-Team