Bài 16: Làm bài tập trang Cafef.vn – phần 2

0

Trong bài 16, chúng ta sẽ hoàn thành phần còn lại của trang tin tức cafef.vn. Điểm quan trọng nhất của bài này là cách sử dụng nth-child() để ghi đè css cho các khối div giống nhau.

Video – Làm bài tập trang Cafef.vn – phần 2

Hướng dẫn chi tiết

+ Có 3 khối tin nhỏ, cho float:left

+ Cần có một khối div sub-news lớn bao bên ngoài 3 khối tin nhỏ, có thuộc tính overflow: hidden để tránh lỗi

+ Các khối nhỏ các nhau margin-right: 45px; riêng khối cuối cùng margin-right: 0px;

+ Để ghi đè css thuộc tính margin-right: 0px cho khối cuối cùng, ta dùng nth-child(3) cho css đạon khối tin.

Lưu ý:

+ Để việc quản lý code dễ hơn, nên chú thích vào cuối mỗi div và mỗi đoạn css. bằng cách bấm ctrl+/

Các thuộc tính mới

+ nth-child(3) để ghi đè css cho các đoạn giống nhau.

Các thuộc tính đã hướng dẫn

+ margin: auto

+ text-transform: uppercase

+ box-shadow: 2px 2px 7px;

+ transition: 0.4s;

+ position: relative

top: 15px;

lelf: 20px;

+ float: left (right) dồn các khối

+ overflow: hidden

+ display: block

+ display: inline

+ margin và padding

+ border : viền, 1px (độ dày) black (màu) solid (loại nét)

+ text-align : canh lề

+ font-size : kích thước.

+ font-weight : bold độ đậm nhạt, giống như thẻ <b></b>

+ font-family : kiểu chữ

+ font-style: italic : tạo chữ in nghiêng

+ float : left, dồn sang một bên

+ text-decoration: none, underline.

+ line-height: 20px: độ giãn dòng.

+ color: (màu chữ) dùng green, red hay mã màu

+ background-color: (màu nền)black

+ background-image: url(imgage source).

Code mẫu: Download

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.