Bài 8: Hướng dẫn làm bài tập – Thuộc tính float: left

0

Trong bài này, chúng ta sẽ tiếp tục làm phần tiếp theo của bài tập trang web tin tức. Một thuộc tính quan trọng là float:left sẽ được giới thiệu trong bài.

Phần video bài trước bạn có thể tham khảo Bài 7: Hiệu ứng hover bằng css và làm bài tập

Video – Hướng dẫn làm bài tập và thuộc tính float:left

Hướng dẫn chi tiết

Thuộc tính float:left (hoặc right)

Dùng để dùng các khối về một phía. Các khối như <div></div> là các khối tự động xuống dòng. Vì vậy, để có thể xếp chúng trên một hàng sao cho vừa đủ với chiều ngang của khối bao bọc cần có thuộc tính float.

Code html của phần các tin tức nhỏ

Định dạng cho khối article bao bên ngoài

Thuộc tính float: left và overflow

Các khối div bên trong

Thuộc tính float: left
Thuộc tính float: left

Lưu ý, để tránh xảy ra lỗi khi dùng float:left, các bạn thêm thuộc tính overflow: hidden vào thẻ chứa khối mang thuộc tính float:left.

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

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

+ overflow: hidden

Các thuộc tính CSS đã học cho tới bài này

+ display: block

+ 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 đầy đủ: 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ố.