Bài Tập Html Và Css

Trong bài này, chúng ta sẽ vận dụng những thuộc tính đã học, kết hợp với cách dùng font và icon được hướng dẫn trong những bài trước để làm bài tập. Đồng thời chuẩn bị những bước cần thiết để học tiếp các thuộc tính và hiệu ứng hover nâng cao.

Bạn đang xem: Bài tập html và css


"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"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 ĐÃINế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

Mục tiêu cần đạt: Phần trong khung màu đỏ

+ Bố cục và trình bày như mẫu đã chọn.

+ Áp dụng những phần đã học để xử lý phần tiêu đề của khối.

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

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

"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ÁOCá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 ĐÃINế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

Lời giải

Phần tiêu đề khối dùng các thuộc tính

+Nên có 1 div bao bên ngoài và 1 thẻ p hoặc thẻ heading

+ Sử dùng cách thêm Google font hoặc dùng font tải về.

+ Thuộc tính display: inline để màu nền ôm sát chữ.

+ Boder: 2px, solid black

Phần các icon

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

Xem thêm: Hướng Dẫn Cách Sắp Xếp Thuốc Tại Nhà Thuốc Trong Nhà Thuốc, 6 Nguyên Tắc Xếp Thuốc Đạt Chuẩn Gpp

+ Dùng font awesome.

+ Mỗi khối có thuộc tính float:left để dồn các khối nhỏ thành 1 hàng.

+ Khối bao ngoài có overflow: hidden để tránh lỗi

Kết quả

*
Kết quả bài tập

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

+ 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ẻ

+ 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.