Trong bài này, chúng ta sẽ áp dụng những nằm trong tính đang học, kết phù hợp với cách sử dụng font và icon được phía dẫn trong số những bài trước để triển khai bài tập. Đồng thời sẵn sàng những bước quan trọng để học tiếp những thuộc tính và hiệu ứng hover nâng cao.

Bạn đang xem: Bài tập html cơ bản có lời giải


Có làm thì mới có ăn uống như ai kia từng nói - Vài chiếc ngắn cho QUẢNG CÁO nhéCác bạn cần hosting WordPress nhanh, rẻ cùng dễ thực hiện có không tính tiền SLL nên lựa chọn Azdigi nhé.Link đăng ký: NHẬN ngay ƯU ĐÃINếu chúng ta đăng cam kết và áp dụng hosting từ liên kết trên, Góc có tác dụng Web sẽ sở hữu được một không nhiều tiền để duy trì.

Mục tiêu yêu cầu đạt: phía bên trong khung color đỏ

+ bố cục tổng quan và trình diễn như mẫu mã đã chọn.

+ Áp dụng đông đảo phần đang học để cách xử lý phần title của khối.

+ Phần icon cần sử dụng font awesome và dồn các khối lại thành 1 hàng.

*
Nội dung bài xích tập phần icon mạng xã hội của theme Newstube

"Người ta tắt AdsBlock chưa hẳn vì người ta dại, mà tín đồ ta quý mình đề xuất coi quảng cáo"Hosting WordPress nhanh, rẻ cùng dễ áp dụng có free SLL hãy lựa chọn Azdigi nhé.Link đăng ký: NHẬN ngay ƯU ĐÃINếu các bạn mua hosting từ link trên, mình sẽ sở hữu được một không nhiều tiền để duy trì. Cảm ơn

Lời giải

Phần title khối dùng các thuộc tính

+Nên có 1 div bao phía bên ngoài và 1 thẻ p. Hoặc thẻ heading

+ Sử dùng bí quyết thêm Google fonts hoặc sử dụng font cài đặt về.

+ nằm trong tính display: inline để màu nền ôm tiếp giáp chữ.

+ Boder: 2px, solid black

Phần những icon

+ phân thành 3 khối, dùng 1 div khác bao phía bên ngoài 3 khối.

+ cần sử dụng font awesome.

+ từng khối tất cả thuộc tính float:left để dồn những khối bé dại thành 1 hàng.

+ Khối bao ngoài gồm overflow: hidden nhằm tránh lỗi

Kết quả

*
Kết quả bài xích tập

Các ở trong tính đã hướng dẫn

+ float: left (right) dồn những khối

+ overflow: hidden

+ display: block

+ display: inline

+ margin cùng 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ẻ

+ font-family : hình dáng chữ

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

+ float : left, dồn qua 1 bên

+ text-decoration: none, underline.

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

+ color: (màu chữ) cần sử dụng green, red giỏi mã màu

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

+ background-image: url(imgage source).

Xem thêm: Công Thức Tính Điện Tích, Định Luật Cu, Độ Lớn Điện Tích ( Hay)

Code mẫu: Download

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