Chia sẻ Tài nguyên

Nơi chia sẻ các Bài tập, Kiến thức về lập trình, công nghệ.

[HTML-CSS] Bài thực hành CSS tổng hợp 1.2 - Tạo box tin tức theo mẫu

Giúp sinh viên tổng hợp kiến thức về HTML và CSS để lập trình xử lý box tin tức hoàn chỉnh.

Kiến thức cần có:

Các thẻ HTML cơ bản:

  • Thẻ đóng khối < section > < article > < div >
  • Thẻ tiêu đề < h1 > < h2 > …
  • Thẻ đoạn văn < p >
  • Thẻ hình ảnh < img >
  • Thẻ link < a >
  • Thẻ danh sách < ul >

Các thuộc tính css cơ bản:

  • Thuộc tính xử lý font, text
  • Thuộc tính liên quan box model, float, display

Phân tích bài tập:

Bài này khá đơn giản chúng ta sẽ chia thành 2 phần:

  • Phần to (khoanh xám)

Bài tập HTML CSS

  • Phần nhỏ (khoanh xám)

Bài tập HTML CSS

Phần to:

  • Có  một ảnh lớn
  • Tiêu đề h2
  • Danh sách chứa 2 dòng chữ nhỏ phía dưới
  • Tất cả đều là liên kết nên có thẻ a ở ngoài
  • Được chứa bởi một khối div

Phần nhỏ

  • Có 3 ảnh nhỏ
  • 3 thẻ p chứa 3 dòng text
  • Tất cả đều là liên kết nên có thẻ a ở ngoài
  • Phần này giống nhau chúng ta chỉ cần làm 1 khối rồi x3 lên sau đó thay đổi nội dung là ok
  • Được chứa bởi một khối article

Hai phần này sẽ được chứa bởi khối section.

Phần code HTML:

Phần code CSS:

Trong bài thì mình đã chèn icon cái máy quay vào nếu ai chưa biết mình sẽ hướng dẫn luôn. Thêm thẻ này vào phần head để sử dụng được icon trên trang fontawesome.com:

< link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous" >

Bạn có thể lấy thẻ này bằng cách tra google từ khóa get fontawesome rồi coppy paste thôi.

Sau đó vào trang fontawesome.com để tìm kiếm icon muốn thêm ví dụ ở trên mình chọn icon camera bằng cách :

  • Gõ tìm kiếm camera
  • Click vào icon muốn thêm
  • Coppy đoạn mã rồi dán vào phần HTML ta muốn đặt icon

Chúc các bạn thành công!

 

Bài viết liên quan:

Nhấn để Dùng thử