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
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
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ứ điều gì bạn muốn
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
This is section one
This is section two
This is section three
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
body {
margin: 0;
}
div {
padding: 65px;
}
h1 {
text-align: center;
}
.one {
background-color: red;
}
.two {
background-color: yellow;
}
.three {
background-color: green;
}
This is section one
This is section two
This is section three
đầ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
The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like [text, images, header, footer, navigation bar, etc]. Div tag has both open[
- Thẻ Div là thẻ cấp Khối
- Đây là thẻ vùng chứa chung
- Nó được sử dụng để nhóm các thẻ HTML khác nhau để có thể tạo các phần và có thể áp dụng kiểu cho chúng
Như chúng ta đã biết thẻ Div là thẻ cấp khối trong ví dụ này thẻ div chứa toàn bộ chiều rộng. Nó sẽ được hiển thị thẻ div mỗi lần trên một dòng mới, không phải trên cùng một dòng
ví dụ 1.
html
0____12_______1
>0____12_______3
>4
>5
>6
>0____12_______8
>0____13_______0
>0____13_______2
>0_______13_______4
>4
6_______11_______4>
9
6_______15_______>
9_______10_______
10_______>5 head0>5_______12_______
10_______>5 head0>5_______12_______
10_______>5 head0>5_______12_______
10_______>5 head0>5_______12_______
9
6_______10_______5>
6_______11_______>
đầu ra
Như chúng ta biết thẻ div được sử dụng để nhóm các thành phần HTML lại với nhau và áp dụng CSS và bố cục web trên chúng. Hãy xem ví dụ bên dưới mà không cần sử dụng thẻ div. chúng ta cần áp dụng CSS cho từng thẻ [trong ví dụ sử dụng thẻ H1 H2 và hai thẻ p]
ví dụ 2.
html
8
title9 0
title9html06
title9>4
title9html10
title9>6
title9>8
title9 0
title9html06
title9>4
title9html22
title9>6
title9>8
title9 0
title9html06
title9>4
6_______11_______4>
6_______15_______>
6_______11_______>
đầu ra
Tạo bố cục web bằng thẻ Div Thẻ div là thẻ chứa bên trong thẻ div chúng ta có thể đặt nhiều phần tử HTML và có thể nhóm lại với nhau và có thể áp dụng CSS cho chúng. Thẻ div có thể được sử dụng để tạo bố cục trang web trong các ví dụ dưới đây cho thấy việc tạo bố cục trang web chúng ta cũng có thể tạo bố cục trang web bằng thẻ bảng nhưng thẻ bảng rất phức tạp để sửa đổi bố cục Thẻ div rất linh hoạt trong việc tạo bố cục trang web . trong ví dụ dưới đây sẽ hiển thị nhóm phần tử HTML bằng cách sử dụng thẻ div và tạo bố cục web theo khối.
Thí dụ.
html
19
title9>6
title9>23
title9>4
title9>27
title9>6
title9>23
title9>33
title9>4
title9>37
title9>6
title9>23
title9>4
title9>45
title9>47
title9>8
title9 0
title9>53
title9>55
title9>4
6_______11_______4>
6_______15_______>
73
title9
title9
title9
title9
6_______12_______5>
5 27
title9
title9
title9
title9
6_______12_______5>
5 81
title9
title9
title9
title9
6_______10_______5>
6_______11_______>
Sử dụng thẻ Div, chúng tôi có thể che khoảng cách giữa thẻ tiêu đề và thẻ đoạn văn trong ví dụ này sẽ hiển thị bố cục web ba khối.
đầu ra.
chúng ta có thể sử dụng CSS trong bất kỳ bộ phận nào bằng các phương pháp sau.
1. Sử dụng lớp. chúng ta có thể sử dụng Lớp trên div cụ thể đó trong CSS nội bộ hoặc CSS bên ngoài
- In case of internal CSS: we need to define Class in the section of HTML within element.
- In case of External CSS: we need to create a separate .css file and include it in HTML code in section using element.
- Mã số.
html
55
title9>57
title9 4
title9>4
6_______11_______4>
6_______15_______>
74
10_______>5 head0>5_______12_______
10_______>5 head0>5_______12_______
10_______>5 head0>5_______12_______
10_______>5 head0>5_______12_______
00
10_______>49_______17_______04>49>
10_______>49_______17_______04>49>
10_______>49_______17_______04>49>
10_______>49_______17_______04>49>
6_______10_______5>
6_______11_______>
đầu ra
Supported Browser: The browser supported by
- Google Chrome
- Cạnh 12
- trình duyệt web IE
- Firefox 1
- Ô-pê-ra
- Cuộc đi săn
HTML là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách cấu trúc các trang web và ứng dụng web. Bạn có thể học HTML từ đầu bằng cách làm theo Hướng dẫn HTML và Ví dụ về HTML này