Trong bài viết này, chúng ta sẽ cùng nhau tạo giao diện trang web mẫu bằng HTML và CSS. Sử dụng trang Khoa Phạm Online làm ví dụ, chúng ta sẽ khám phá cách sử dụng các thuộc tính và thẻ HTML để quản lý bố cục trang web. Hãy bắt đầu ngay!

Bài tập HTML CSS

Chúng ta sẽ tạo phần nội dung sau:

Bạn đang xem: Bài tập HTML CSS làm giao diện trang web mẫu

Xem thêm : Lời tri ân tuyệt vời trong công việc

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

• Thẻ đóng khối
• Thẻ tiêu đề

  ,

  , …

• Thẻ đoạn văn

• Thẻ hình ảnh
• Thẻ liên kết
• Cách chèn biểu tượng và phông chữ từ Google

display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: stretch | flex-start | flex-end | baseline;

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

Xem thêm : Câu hỏi trắc nghiệm về ngày 30 tháng 4 và mùng 1 tháng 5

Khi xem xét bài tập, chúng ta có thể chia thành các khối sau:

1. Khối lớn: Chứa tất cả các phần khác và có hình nền.
2. Khối màn hình đen: Là con của khối lớn, được sử dụng để làm cho hình nền trở nên tối hơn và căn giữa nội dung bên trong.
3. Khối đen: Là con của khối màn hình đen, chứa hai phần tìm kiếm và giới thiệu tiếp tục, và được sử dụng để chia cấu trúc.
4. Khối tìm kiếm và giới thiệu: Cùng cấp với nhau.
5. Khối _1khoi: Là một phần của khối giới thiệu, sau khi áp dụng CSS, chúng ta sẽ nhân đôi nó.

Dưới đây là mã HTML và CSS:

  
  
  
  


  

    

      

        

          
KHOA PHẠM ONLINE
          
Trang học lập trình phi lợi nhuận. Bạn sẽ phải ngạc nhiên vì mặc dù miễn phí
 nhưng chất hơn cả có phí
        
        

          
        
        

          

            
            
Nội dung học cập nhật mới liên tục theo yêu cầu của người học
          
          

            
            
Livecode miễn phí giao lưu cùng người học hàng tuần
          
          

            
            
Miễn phí 100%, do chính giảng viên tại Khoa Phạm xây dựng bài học
          
        
      
    
  

*{ border: none; margin:0; padding:0; font-family: 'Open Sans Condensed', sans-serif; font-family: 'Quicksand', sans-serif; }
html{ width: 100%; height: 100%; }
body{ width: 100%; height: 100%; }
p{ color:white; }
.khoito{ background-image: url("./images/pexels-photo.jpg"); background-size: cover; width: 100%; height: 100%; }
.manhinhden { background-color: #00000059; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.khoiden { width: 60%; height: 65%; background-color: #00000090; display: flex; flex-direction: column; justify-content: center; align-items: center; }
div.text{ display: flex; flex-direction: column; align-items: center; }
h2{ color:white; font-size: 40px; font-weight: lighter; }
#txt1{ color:white; text-align: center; line-height: 25px; margin: 25px 0px; }
div.timkiem{ width: 100%; text-align: center; }
.timkiem input{ width: 80%; height: 50px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.timkiem i{ background-color: #0D7CC9; color: white; font-size: 20px; padding:15px; position: relative; top:2px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.gioithieu{ display: flex; flex-direction: row; position: relative; top: 30px; width: 100%; justify-content: space-evenly; }
._1khoi{ width: 175px; height: 93px; justify-content: space-between; }
._1khoi i{ color:white; float:left; font-size: 26px; height: 90px; margin-right: 20px; }
._1khoi p{ font-size: 15px; }

Hy vọng rằng bài viết này giúp bạn hiểu rõ hơn về cách thực hiện bài tập và tạo giao diện web sử dụng HTML và CSS.

Nguồn: https://ispacedanang.edu.vn
Danh mục: Học tập