Làm thế nào để bạn chia một trang web trong html?

Tách các trang tài liệu HTML nhanh chóng và dễ dàng. Công cụ HTML Splitter trực tuyến miễn phí mà không cần đăng ký được tạo để nhanh chóng tách các trang từ tệp HTML. Bạn không phải mất thời gian thực hiện thủ công các thao tác này trên phần mềm máy tính để bàn. Mục tiêu của chúng tôi là cung cấp cho bạn một giải pháp đáng tin cậy để tối ưu hóa quy trình làm việc tại văn phòng của bạn thông qua ứng dụng HTML Splitter trực tuyến. Tất cả các tệp HTML được xử lý trên máy chủ của chúng tôi nên không cần cài đặt phần mềm bổ sung hoặc bổ sung. Nó mạnh mẽ, hiện đại, nhanh chóng, linh hoạt, dễ sử dụng và hoàn toàn miễn phí

• Dễ dàng chia trang tài liệu HTML
• Tách các trang khỏi tệp HTML
• Tải xuống hoặc gửi tệp kết quả dưới dạng tệp đính kèm email

Giả sử bạn muốn chia trang thành ba phần. Bạn có thể làm điều này bằng cách thêm ba thẻ div trống

<div>div>
<div>div>
<div>div>

Bước 2. Thêm tên lớp vào thẻ div

Bước tiếp theo là thêm tên lớp vào các thẻ div và đặt cho chúng một tên duy nhất. Thuộc tính tên lớp phân tách các thẻ div khác và khi bạn áp dụng kiểu CSS cho một trong các phần, nó sẽ không ảnh hưởng đến các phần đó

Ở đây, tôi đặt tên cho chúng là một, hai và ba, nhưng bạn có thể tự do gọi bất cứ thứ gì bạn muốn

<div class="one">div>
<div class="two">div>
<div class="three">div>

Bước 3. thêm nội dung

Tại thời điểm này, bạn đã sẵn sàng. Trang được chia thành ba phần và bạn có thể thêm bất kỳ nội dung nào như văn bản, hình ảnh, v.v. , bên trong các thẻ div. Ở đây, tôi đã thêm một văn bản đơn giản để cung cấp cho bạn một ý tưởng

<div class="one">
  <h1>This is section oneh1>
div>
<div class="two">
  <h1>This is section twoh1>
div>
<div class="three">
  <h1>This is section threeh1>
div>

mã ví dụ

Đây là mã ví dụ về cách bạn có thể chia trang bằng thẻ div. Các thuộc tính lề, div và h1 chỉ được bao gồm cho mục đích trình diễn

<style>
  body {
    margin: 0;
  }

  div {
    padding: 65px;
  }

  h1 {
    text-align: center;
  }

  .one {
    background-color: red;
  }

  .two {
    background-color: yellow;
  }

  .three {
    background-color: green;
  }
style>

<div class="one">
  <h1>This is section oneh1>
div>
<div class="two">
  <h1>This is section twoh1>
div>
<div class="three">
  <h1>This is section threeh1>
div>

đầu ra ví dụ

Và đây là cách nó sẽ xuất hiện trên trình duyệt

Thông báo quan trọng

Chúng tôi khuyên bạn nên sử dụng thẻ section để chia trang. Thẻ phần cải thiện khả năng đọc của mã HTML vì việc thêm quá nhiều thẻ div có thể khiến mã khó đọc

Ngoài ra, bạn đang giúp cải thiện khả năng truy cập của trang web để người khuyết tật có thể sử dụng trang web của bạn. Và cuối cùng, bạn cũng đang giúp các công cụ tìm kiếm hiểu nội dung trang web của bạn

Nếu bạn muốn làm mới kiến ​​thức của mình về thẻ div và tìm hiểu xem nó có thể làm gì khác, hãy xem bài viết này về chức năng của “div” trong HTML

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp chia trang HTML thành hai phần theo chiều dọc, tất cả chúng ta đều biết rằng chúng ta có thể chia trang html thành hai phần theo chiều dọc cũng như hai phần theo chiều ngang

---

Tìm hiểu cách tạo màn hình chia đôi (50/50) bằng CSS

---

Tự mình thử »

---

Bước 1) Thêm HTML

Ví dụ

 

   

   

Jane Flex

Một số tiếp theo

 

 

   

   

John Doe

Một số văn bản ở đây quá

 

---

---

Bước 2) Thêm CSS

Ví dụ

/* Chia đôi màn hình */
. tách {
  chiều cao. 100%;
  chiều rộng. 50%;
  vị trí. đã sửa;
  chỉ mục z. 1;
  trên cùng. 0;
  tràn-x. ẩn;
  padding-top. 20px;
}

/* Điều khiển bên trái */
. trái {
  trái. 0;
  màu nền. #111;
}

/* Kiểm soát bên phải */
. phải {
  phải. 0;
  màu nền. màu đỏ;
}

/* Nếu bạn muốn căn giữa nội dung theo chiều ngang và chiều dọc */
. vị trí {
  chính giữa. tuyệt đối;
  trên cùng. 50%;
  còn lại. 50%;
  biến đổi. translate(-50%, -50%);
  căn chỉnh văn bản. trung tâm;
}

/* Tạo kiểu cho hình ảnh bên trong vùng chứa ở giữa, nếu cần */
. căn giữa img {
  chiều rộng. 150px;
  bán kính đường viền. 50%;
}

Tự mình thử »