Bài tập HTML CSS | Làm giao diện trang Khoapham.vn

0
2308

Mình sẽ hướng dẫn các bạn làm bài tập html css ,chúng ta sẽ làm một phần giao diện trang Khoapham.vn. Mình nghĩ bài này khá hay vì nó sử dụng gần như đầy đủ các thuộc tính để chia layout .Mình sẽ bắt đầu luôn.

html css

Bài tập HTML CSS

Chúng ta sẽ làm phần nội dung này

Bài tập HTML CSS  | Làm giao diện trang Khoapham.vn 1

Mình xin 5 phút quảng cáo nha =))

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

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

  • Thẻ đóng khối  <div>
  • Thẻ tiêu đề <h1> <h2> …
  • Thẻ đoạn văn <p>
  • Thẻ hình ảnh <img>
  • Thẻ link <a>
  • Chèn icon
  • Chèn font google

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

  • flexbox

display: flex;

flex-direction :

+ row, theo hàng tương đương với float:left

+ row-reverse, theo hàng từ sau ra trước, float:right;

+ column, theo cột từ trên xuống dưới

+ column-reverse, theo hàng từ dưới lên trên.

flex-wrap (có xuống dòng hay không khi đủ chiều rộng).

+ no-wrap: ko xuống dòng, chỉ hiện thị trên 1 hàng

+ wrap: đủ chiều rộng của khối cha thì tự động xuống dòng.

+ wrap-reverse: đảo ngược.

justify-content:  canh chỉnh theo chiều ngang cho các khối bên trong

+ center: tự động căn giữa (tương đương text-align :center)

+ flex-start (dồn sang trái)

+ flex-end (dồn sang phải)

+ space-between ( chia đều trong khối)

+ space-around (chia đều các khối và hai lề của khối ngoài).

align-items: canh chỉnh theo chiều dọc (khối bên ngoài phải có độ cao cố định)

+ stretch: tự lấp đầy chiều cao

+ flex-start: dồn lên trên

+ flex-end: dồn xuống dưới.

+ base-line: chỉ canh chữ cho thẳng hàng.

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

Nhìn qua thì chúng ta sẽ chia nó thành các khối sau:

  • Khối to: sẽ chứa tất cả các khối còn lại và đặt hình nền
  • Khối màn hình đen: là con của khối to đặt màu nền để giảm độ sáng của hình nền và để flex box để đưa khối đen ra giữa màn hình
  • Khối đen: là con của khối màn hình đen và chứa trực tiếp 2 khối tìm kiếm và giới thiệu tiếp tục để flex box để chia layout
  • Khối tìm kiếm và giới thiệu: cùng cấp
  • Khối _1khoi: thằng này sẽ nằm trong khối giới thiệu, xử lý css xong chúng ta sẽ x3 nó lên 

Bây giờ mình sẽ code:

Code html:

Code CSS:

Okê xong rồi đấy, các bạn cứ làm giống như mình đã phân tích nha.  Mình sẽ quay lại với bài tập mới 😀

Xem các bài viết tiếp theo tại đây

avatar
  Subscribe  
Notify of