Làm cách nào để chia trang HTML thành ba phần theo chiều ngang và chiều dọc?

Mã CSS sẽ là

html {
  height: 100%;
  width: 100%;
}

body {
  display: table;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.row {
  display: table-row;
  height: 20mm; /* adjust as needed for size */
}

.row:nth-child(1) {
  background-color: #eee;
}

.row:nth-child(2) {
  background-color: #ddd;
}
.row:nth-child(3) {
  background-color: #aaa;
}

và sau đó là HTML

  row 1
  

  lorem ipsum



  row 2 
  

  lorem ipsum





row 3


lorem ipsum
 ```
Which should give you 3 horizontal sections and you can color as needed

Chúng ta sẽ trình bày cách chia trang HTML thành 2 phần, phần dọc và phần ngang trong bài học này. Chúng ta đều biết cách chia trang HTML thành hai phần, hai phần dọc và hai phần ngang

Tuy nhiên, ý tưởng đằng sau giải pháp của chúng tôi hôm nay là tìm cách chia trang HTML thành hai phần dọc và ngang. Mặc dù có nhiều cách để thực hiện việc này nhưng mục đích của chúng tôi là hỗ trợ bạn tìm ra giải pháp đơn giản nhất có thể

Do đó, hôm nay chúng tôi sẽ hướng dẫn các bạn cách chia trang HTML thành hai phần theo chiều dọc và chiều ngang

Hướng Dẫn Chia Trang HTML Thành 2 Phần Theo Chiều Dọc, Theo Bước

Ngoài ra, không tốn thêm thời gian. Thẻ bộ phận bao gồm thẻ hậu duệ của chúng, thẻ bộ phận, có thể được sử dụng để thực hiện việc này. Nhưng với mục đích này, thẻ chia thường được sử dụng

Do đó, để giúp bạn hành động một cách chuyên nghiệp, chúng tôi cũng sẽ hướng dẫn bạn cách sử dụng các phần tử phân chia để phân chia theo chiều dọc trang HTML. Thuộc tính float, có giá trị còn lại, là một thuộc tính khác được sử dụng trong lập trình

Điều đó ngụ ý rằng nó di chuyển trang sang bên trái để mọi thứ thẳng hàng theo chiều dọc. Mã hiện được cung cấp dưới dạng

1. Để thông báo cho trình duyệt web về phiên bản HTML mà tài liệu được viết, một trong những loại đầu tiên
2. Phần tử được sử dụng để biểu thị sự bắt đầu của tệp Html
3. Như đã đề cập trước đây, thẻ hiện được sử dụng để cung cấp thông tin chi tiết về trang web. Aelement được bao gồm trong thẻ này để cho phép chúng tôi cung cấp tiêu đề của trang web. Các thẻ "đầu" và "tiêu đề" là các thẻ được ghép nối. Do đó, cả hai đều kết thúc bằng các thẻ và tương ứng
4. Phần tử được sử dụng để chỉ định phần thân của trang web. Tài liệu này chứa tất cả nội dung của trang web. Vì chúng tôi muốn chỉ ra khu vực mà chúng tôi muốn chia theo chiều dọc thành hai nửa, thẻ div được đặt ở đây trong thẻ body
5. Đưa ra số đo chiều cao phù hợp với màn hình của bạn nếu bạn muốn chia toàn thân
6. Tiếp theo, chúng ta phải xác định hai lĩnh vực; . Sau tất cả những điều này, công việc còn lại được hoàn thành bằng CSS;
7. Bước cuối cùng là đóng các thẻ nội dung và html bằng các thẻ và tương ứng

Hướng Dẫn Chia Trang HTML Thành 2 Phần Theo Chiều Ngang, Từng Bước

Không tốn thêm thời gian, như. Phần tử div và thẻ hậu duệ của nó, thẻ phần, có thể được sử dụng để thực hiện việc này. Tuy nhiên, thẻ chia chủ yếu được sử dụng để thực hiện điều này

Do đó, để giúp bạn hành động một cách chuyên nghiệp, chúng tôi cũng sẽ chỉ cho bạn cách sử dụng các phần tử phân chia để phân tách hợp lý một trang HTML thành các phần. Nếu bạn muốn tìm hiểu thêm về phân chia theo chiều dọc, trước đây chúng tôi đã viết một bài về chủ đề này. Sử dụng trang làm tài nguyên bằng cách xem qua nó

1. Điều đầu tiên chúng ta làm bây giờ là nhập, cho trình duyệt web biết tài liệu được viết bằng phiên bản HTML nào
2. Phần tử được sử dụng để biểu thị sự bắt đầu của tệp Html
3. Như đã đề cập trước đây, thẻ hiện được sử dụng để cung cấp thông tin về một trang web. Việc sử dụng thetag trong thẻ này giúp chúng ta có thể khai báo tiêu đề của trang web. Các thẻ "đầu" và "tiêu đề" là các thẻ được ghép nối. Do đó, cả hai đều chứa các thẻ đóng và tương ứng
4. Phần tử body> được sử dụng để chỉ định phần thân của trang web. Ở đây được viết tất cả các thông tin sẽ xuất hiện trên trang web
5. Ở đây, chúng tôi xây dựng phần tử div với chiều rộng và chiều cao nhất định trong thẻ body trước khi cho phép bạn chọn màu nền
6. Hai thẻ div bổ sung được tạo trong div chính. Ngoài ra, chiều rộng của nó phải khớp với chiều rộng của div chính, nhưng bạn nên cung cấp cho chúng chiều cao riêng nhưng thấp hơn chiều cao của div chính
7. Hãy nhớ rằng chiều cao của thẻ div chính bằng tổng chiều cao của các thẻ div phụ
8. Như bạn có thể thấy trong trình duyệt của mình ngay bây giờ, trang web được chia thành hai phần, mỗi phần có chiều cao mà bạn yêu cầu
9. Bước cuối cùng là kết thúc nội dung và các thẻ html với các thẻ and tương ứng

Phần kết luận. -

Tóm lại, chúng ta có thể kết luận rằng sử dụng các phần tử phân chia, chúng ta có thể tách một trang HTML theo cả chiều dọc và chiều ngang

Tôi thực sự hy vọng rằng bài viết này về cách chia một trang HTML thành hai phần sẽ hữu ích cho bạn và rằng các kỹ thuật và phương pháp nêu trên sẽ đơn giản để sử dụng