Bài Tập Về Html Css Javascript, Bài Tập Html Css Cơ Bản

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.

Đang xem: Bài tập về html css javascript

Video – Bài tập tổng hợp

Hướng dẫn chi tiết

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

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.

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

Xem thêm: Chẩn Đoán Ung Thư Tinh Hoàn : Nguyên Nhân, Triệu Chứng, Ung Thư Tinh Hoàn: Nguyên Nhân, Triệu Chứ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.

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

Liên hệ

Bài 2: Các thẻ HTML cơ bản – phần 1Bài 3: Các thẻ HTML cơ bản – phần 2Bài 18: Cách sử dụng flexboxBài 25: Thuộc tính background attachment
HTML và CSS
1 2.386
ShareFacebookTwitterGoogle+

*

Admin

Trước

Bài 11: Sử dụng icon Font awesome

Sau

Bài 13: Hiệu ứng hover với thuộc tính transition

Bạn cũng có thể thíchThêm từ tác giả
HTML và CSS cơ bản

Bài 26: Hiệu ứng zoom và gradient

HTML và CSS cơ bản

Bài 25: Thuộc tính background attachment

HTML và CSS cơ bản

Bài 24: Một số hiệu ứng hover thường dùng

HTML và CSS cơ bản

Bài 23: Làm bài tập trang Edumall

TrướcKế tiếp
Để lại một trả lời
Hủy trả lời

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

Lưu thông tin của tôi

Tìm kiếm bài viết
Fanpage Góc làm web
FBI WARNING – dưới đây có MÃ GIẢM GIÁ

Bạn MUỐN TĂNG KÍCH THƯỚC website, nhanh, rẻ và dễ sử dụng có thể chọn hosting Azdigi nhé.

Xem thêm: how to create socket server in php

Link đăng ký: https://my.azdigi.com/aff.php?aff=1612

Mã giảm giá 10% từ Góc Làm Web: in4tintuc.com_10OFF

Nếu các bạn click và đăng ký hosting từ link trên, mình sẽ có một ít tiền để duy trì.

Bài 2: Các thẻ HTML cơ bản – phần 1Bài 3: Các thẻ HTML cơ bản – phần 2Bài 18: Cách sử dụng flexboxBài 25: Thuộc tính background attachment
Hosting tốt cho web WordPress

Chuyên mục phổ biến
VPS giá rẻ Vultr cho MMO

*

Các chủ đề
BeThemeBootstrapCông nghệFacebook ChatFindeoFlat designFluent DesignHTML và CSSIllustratorJavaScriptjQueryLaptoplập trình theme WordPressMaterial DesignPhi lý tríPHPPlugin WPPPHSEOThủ thuậtWordPress

#2 – – Sử dụng trình kéo thả…

Th12 31, 2019

Bài 14: Cách viết bài viết chuẩn SEO cho website

Th7 5, 2017

Những tiêu chí chọn mua laptop trong năm 2018

Th3 11, 2018

Bài 3: Câu lệnh điều kiện trong JavaScript

Th4 8, 2018
TrướcKế tiếp 1 của 44
Bản quyền thuộc về Góc Làm Web
Sign in
WordPress
WordPress Development

#4 – WordPress Enqueue – Load css và js cho theme in4tintuc.com –…

WordPress

#3 – WP Dev – Thiết lập cơ bản cấu trúc theme in4tintuc.com

Theme WordPress

Findeo – Nhà đất | Bài 1: Xây dựng website bất động sản với WordPress và theme…

TrướcKế tiếp
Lập trình web
WordPress Development

#15 – WP Search.php | Tùy biến form tìm kiếm – trang kết quả tìm kiếm

WordPress Development

#14 – WP Comments.php | Tùy biến form bình luận và danh sách bình luận

WordPress Development

TrướcKế tiếp
Thiết kế
UI/UX Design

Fluent Design – Ngôn ngữ thiết kế mới của Microsoft

Leave a Comment