Người Viết : ViKiMi Editor

Sử dụng Phần tử Khối HTML <div> để xây dựng một bộ khung Website đạt chuẩn nhất !
Khi bạn quen sử dụng phần tử khối và phần tử nội tuyến để thiết kế giao diện Website. Chắc hẳn bạn sẽ không bỏ qua chúng vì thiết kế chúng mang lại rất dễ dàng sử dụng cũng hiệu quả cao. Hiệu quả của chúng sẽ khiến bạn bắt gặp ở hầu hết các Website. Và cho dù bạn muốn thực hiện ở mức độ khó ra sao thì điều cơ bản này luôn luôn cần.
Điều mà bạn muốn chắc chắn sẽ luôn có khi bạn sử dụng Phần tử Khối và Phần tử nội tuyến. Nó sẽ không làm bạn thất vọng !
Lần này chúng ta sẽ đề cập tới Phần Tử Div trong HTML.
+ Sử dụng Phần tử DIV làm vùng chứa
+ Phần tử DIV sẽ giúp tạo ra bố cục chung cho Trang Web
Chúng ta sẽ sử dụng Phần Tử DIV để chứa các Phần tử khác.
Mặc định, Phần tử <DIV> là phần tử khối, nghĩa là nó chiếm toàn bộ chiều rộng có sẵn và đi kèm với ngắt dòng trước và sau.
Nhưng chúng ta sẽ có những tuỳ chỉnh để đạt hiệu quả mang lại bố cụ Web.
EXAMPLE ::
THIẾT KẾ MẶC ĐỊNH THẺ DIV CỦA HTML
<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
border : 1px solid green;
padding : 1%;
}
</style>
<body>
<h1>SỬ DỤNG PHẦN TỬ DIV</h1>
Cách một phần tử <div>I am a div</div> được hiển thị.
<h3>Phần tử Div Có viền</h3>
</body>
</html>
Hình Ảnh Kết Quả :

A ] SỬ DỤNG PHẦN TỬ DIV LÀM VÙNG CHỨA
Theo mặc định phần tử Div là phần tử khối, sẽ làm vùng chứa.
Phần tử <div> được sử dụng để nhóm các phần của trang web.
EXAMPLE :
<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>
<h1>HTML DIV Example</h1>
<div>
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA</h2>
<p>Thông tin về Ngành CNTT.</p>
<p>Nhu Cầu Lớn KS Chíp Bán Dẫn.</p>
</div>
<p>Phần Tử DIV Có Viền.</p>
</body>
</html>
Hình Ảnh Kết Quả :

B ] TẠO BỐ CỤC WEBSITE SỬ DỤNG :
+ PHẦN TỬ DIV LÀM VÙNG CHỨA
+ THUỘC TÍNH CSS float
Khi xây dựng trang web, bạn thường muốn có hai hoặc nhiều khối nội dung được đặt cạnh nhau thành từng hàng. Để đạt mục đích! Khi đó chúng ta dùng các Phần tử Div được đặt cạnh nhau trên từng hàng.
Nhờ vậy, chúng ta sẽ có bố cục Website như mong muốn.
Có nhiều phương pháp khác nhau để căn chỉnh các phần tử đặt cạnh nhau. Nhưng phổ biến là sử dụng thuộc tính CSS float.
Khá là vui vì Thuộc tính CSS float ban đầu không nhằm mục đích căn chỉnh các phần tử <div> cạnh nhau, nhưng lại được sử dụng cho mục đích này rất nhiều.
>> Thuộc tính CSS float được sử dụng để định vị và định dạng nội dung, đồng thời cho phép các phần tử cạnh nhau thay vì chồng lên nhau.
EXAMPLE :
<!DOCTYPE html>
<html>
<style>
div.mycontainer {
width:100%;
overflow:auto;
}
div.mycontainer div {
width:30% !important;
float:left;
border : 1px solid black;
padding : 1%;
display : block;
}
</style>
<body>
<h1>Float Example</h1>
<p>Trên một hàng sẽ có 3 phần tử DIV cạnh nhau.</p>
<div class="mycontainer">
<!--Hàng Số 1-->
<div style="background-color:#FFF4A3;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 1</h2>
<p>Thông tin về Ngành CNTT.</p>
<p>Nhu Cầu Lớn KS Chíp Bán Dẫn.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 2</h2>
<p>Thông tin về Ngành TT.</p>
<p>Nhu Cầu Lớn KS Ngành TT.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 3</h2>
<p>Thông tin về Ngành DTVT.</p>
<p>Nhu Cầu Lớn KS Chíp Bán Dẫn.</p>
</div>
<!--Hàng Số 2-->
<div style="background-color:#FFF4A3;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 4</h2>
<p>Thông tin về Ngành SP.</p>
<p>Nhu Cầu Lớn GV Mầm Non.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 5</h2>
<p>Thông tin về Ngành MT.</p>
<p>Nhu Cầu Lớn KS Ngành Môi Trường.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 6</h2>
<p>Thông tin về Ngành SH.</p>
<p>Nhu Cầu Lớn KS Ngành SH.</p>
</div>
</div> <!-- End .mycontainer -->
<h3>Phần Tử DIV Có Viền.</h3>
</body>
</html>
Hình Ảnh Kết Quả :

C ] TẠO BỐ CỤC WEBSITE SỬ DỤNG :
+ PHẦN TỬ DIV CÓ HIỂN THỊ KHỐI NỘI TUYẾN
+ THUỘC TÍNH CSS DISPLAY : Inline-block
Để có thiết kế khối nội dung được đặt cạnh nhau thành từng hàng. Cụ thể chúng ta sẽ sử dụng thẻ DIV.
Khi đó bạn thay đổi thuộc tính hiển thị ( / Display ) của phần tử <div> từ khối ( / Block ) thành khối nội tuyến ( / Inline-Block )
Và kết quả các phần tử <div> sẽ không còn thêm dấu ngắt dòng trước và sau nữa và sẽ được hiển thị cạnh nhau cũng như không chồng lên nhau.
EXAMPLE :
<!DOCTYPE html>
<html>
<style>
.mycontainer {
width:100%;
}
.mycontainer > div {
width:30%;
display:inline-block;
padding : 1%;
}
</style>
<body>
<h1>Inline-Block Example</h1>
<p>Trên một hàng sẽ có 3 phần tử DIV cạnh nhau.</p>
<div class="mycontainer">
<!--Hàng Số 1-->
<div style="background-color:#FFF4A3;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 1</h2>
<p>Thông tin về Ngành CNTT.</p>
<p>Nhu Cầu Lớn KS Chíp Bán Dẫn.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 2</h2>
<p>Thông tin về Ngành DTVT.</p>
<p>Công Nghệ 5G đã phổ cập.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 3</h2>
<p>Thông tin về Ngành TT.</p>
<p>Đang Thu Hút Lớn Kỹ Sư Cầu Nối.</p>
</div>
</div> <!-- End .mycontainer -->
</body>
</html>
Hình Ảnh Kết Quả :

D ] TẠO BỐ CỤC WEBSITE SỬ DỤNG :
+ PHẦN TỬ DIV
+ THUỘC TÍNH CSS DISPLAY : Flex
Để có thiết kế khối nội dung được đặt cạnh nhau thành từng hàng. Cụ thể chúng ta sẽ sử dụng thẻ DIV.
Layout Module được giới thiệu là CSS Flexbox ! Nó Giúp thiết kế cấu trúc bố cục linh hoạt mà không cần sử dụng Float hoặc Position.
Để làm việc với phương thức CSS flex, hãy bao quanh các phần tử <div> bằng một phần tử <div> cha và đặt cho phần tử <div> cha trạng thái là một khung chứa flex.
EXAMPLE :
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
</head>
<body>
<h1>Flexbox Example</h1>
<p>Trên một hàng sẽ có 3 phần tử DIV cạnh nhau.</p>
<div class="mycontainer">
<!--Hàng Số 1-->
<div style="background-color:#FFF4A3;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 1</h2>
<p>Thông tin về Ngành CNTT.</p>
<p>Nhu Cầu Lớn KS Chíp Bán Dẫn.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 2</h2>
<p>Thông tin về Ngành DTVT.</p>
<p>Công Nghệ 5G đã phổ cập.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 3</h2>
<p>Thông tin về Ngành TT.</p>
<p>Đang Thu Hút Lớn Kỹ Sư Cầu Nối.</p>
</div>
</div> <!--- END .mycontainer --->
</body>
</html>
Hình Ảnh Kết Quả :

E ] TẠO BỐ CỤC WEBSITE SỬ DỤNG :
+ PHẦN TỬ DIV
+ THUỘC TÍNH CSS DISPLAY : Grid
Để có thiết kế khối nội dung được đặt cạnh nhau thành từng hàng. Cụ thể chúng ta sẽ sử dụng thẻ DIV.
Layout Module được giới thiệu là CSS Grid ! CSS Grid cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và các cột, giúp thiết kế trang web dễ dàng hơn mà không cần phải sử dụng các float và Position.
Nghe gần giống như CSS Flex!
CSS Grid có khả năng xác định nhiều hàng và định vị từng hàng một.
Phương thức CSS Grid yêu cầu bạn bao quanh các phần tử <div> bằng một phần tử <div> cha và đặt cho phần tử <div> cha trạng thái là khung chứa Grid ( / Khung Chứa Lưới ), đồng thời bạn phải chỉ định chiều rộng của mỗi cột.
EXAMPLE :
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
</head>
<body>
<h1>Grid Example</h1>
<p>Trên một hàng sẽ có 3 phần tử DIV cạnh nhau.</p>
<div class="grid-container">
<!--Hàng Số 1-->
<div style="background-color:#FFF4A3;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 1</h2>
<p>Thông tin về Ngành CNTT.</p>
<p>Nhu Cầu Lớn KS Chíp Bán Dẫn.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 2</h2>
<p>Thông tin về Ngành DTVT.</p>
<p>Công Nghệ 5G đã phổ cập.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Phần Tử DIV sử dụng làm VÙNG CHỨA 3</h2>
<p>Thông tin về Ngành TT.</p>
<p>Đang Thu Hút Lớn Kỹ Sư Cầu Nối.</p>
</div>
</div> <!--- END .grid-container --->
</body>
</html>
Hình Ảnh Kết Quả :

Như vậy, Cách sử dụng DIV Tag để thiết kế bố cục giao diện của Website không khó. Thật dễ dàng để mang lại một bố cục sắp xếp cho nội dung của Website. Bạn có thể thấy công thức làm nên điều này là sử dụng Div Tag, đồng thời bạn có thể kết hợp với phần trước để thấy rõ cách thiết kế áp dụng cho từng phần trong tổng thể của cả Website.
+ Đó là sự kết hợp giữa Phần Tử Khối và Phần Tử Nội Tuyến
+ Ban đầu khi chưa quen thiết kế Giao diện, hãy SET các chỉ số CSS Property cụ thể cho các phần tử
+ Nếu bạn chưa thể có một giao diện Website như mong muốn, thì khi đó có lẽ công việc tiếp theo của bạn là phải sử dụng đến một ngôn ngữ để bổ sung đó là JavaScript, hoặc một ngôn ngữ phù hợp.