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

0 1.586

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

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

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

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

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ệ

Bạn cũng có thể thích
Để lại một trả lời

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