Thẻ div (tiếng Anh: division) định nghĩa một phân vùng hoặc vùng trong một tài liệu HTML. Vì vậy, thẻ div thường được dùng để làm vùng chứa các phần tử HTML khác hay dùng để định nghĩa bố cục giao diện của 1 trang đơn giản.div (tiếng Anh: division) định nghĩa một phân vùng hoặc vùng trong một tài liệu HTML. Vì vậy, thẻ div thường được dùng để làm vùng chứa các phần tử HTML khác hay dùng để định nghĩa bố cục giao diện của 1 trang đơn giản. Show Xác định kích thước chiều rộng (width) websiteTrong thiết kế Web, người ta chỉ cần nắm được thông số chiều rộng (width) của 1 trang web để biết thiết kế trang Web này như nào. Do trang web được hiển thị trên màn hình desktop, laptop, tablet, mobile,… có chiều rộng màn hình khác nhau. Vì vậy, các nhà thiết kế Web thường thiết lập chiều rộng bằng tỉ lệ % và kết hợp với Bootstrap (hoặc framework) để xây dựng giao diện Web đáp ứng (responsive), tức đáp ứng hiển thị theo kích thước màn hình. Trong bài viết hướng dẫn bạn canh kích thước chiều rộng bằng đơn vị px (pixel), nếu bạn dùng đơn vị % thì cũng tương tự. Chúng ta sẽ lấy kích thước 1024px làm chuẩn do kích thước chiều rộng ở mức trung bình với 1 giao diện Web trên Desktop/Laptop. Trừ đi kích thước của thanh kéo dọc bên phải (scrollbar) thì bạn có kích thước chiều rộng rơi tầm 980px là ổn. Bạn có thể định nghĩa kích thước chiều rộng khác là tùy ý.kích thước 1024px làm chuẩn do kích thước chiều rộng ở mức trung bình với 1 giao diện Web trên Desktop/Laptop. Trừ đi kích thước của thanh kéo dọc bên phải (scrollbar) thì bạn có kích thước chiều rộng rơi tầm 980px là ổn. Bạn có thể định nghĩa kích thước chiều rộng khác là tùy ý.
Định nghĩa phong cách bodyTrong bài này dùng thẻ style ở phần tử head, bạn có thể lưu style bằng file riêng biệt nếu muốn, chẳng hạn lưu file riêng thì code thế này: <head> <link rel="stylesheet" type="text/css" href="tentaptincuaban.css"> </head> Chúng ta dùng phong cách margin: 0 auto để mô tả bố cục tự động canh giữa (canh đều hai bên). Nếu không giao diện của bạn nằm lệch hẳn bên trái, nhìn không thẩm mỹ.margin: 0 auto để mô tả bố cục tự động canh giữa (canh đều hai bên). Nếu không giao diện của bạn nằm lệch hẳn bên trái, nhìn không thẩm mỹ. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style>
body
{
margin: 0 auto; // canh bố cục đều 2 bên, dòng này bắt buộc phải có
}
</style>
</head>
<body>
Nội dung...
</body>
</html>
Bố cục websiteChúng ta sẽ thiết kế một website đơn giản có bố cục gồm: 
Trong thẻ body, bạn phải phân chia bố cục bằng thẻ div như sau. Hãy chú ý đọc thật kỹ và chậm rãi dòng giải thích sau.Hãy chú ý đọc thật kỹ và chậm rãi dòng giải thích sau. Đầu tiên bạn dùng 1 thẻ div với class=”wrap” để bao toàn bộ giao diện lại. Thuộc tính class sử dụng cho div để định nghĩa phong cách ở phần style phía trên. Thuộc tính class có thể sử dụng cho nhiều div. Trái lại, thuộc tính id cũng tương tự class, nhưng chỉ sử dụng cho 1 vùng div về mặt lý thuyết, trên thực tế bạn có dùng cho nhiều div nếu muốn.class=”wrap” để bao toàn bộ giao diện lại. Thuộc tính class sử dụng cho div để định nghĩa phong cách ở phần style phía trên. Thuộc tính class có thể sử dụng cho nhiều div. Trái lại, thuộc tính id cũng tương tự class, nhưng chỉ sử dụng cho 1 vùng div về mặt lý thuyết, trên thực tế bạn có dùng cho nhiều div nếu muốn. Tiếp theo, bạn sử dụng 1 vùng div với id=”header” để tạo header. Để chắc ăn, bạn sử dụng 1 div với class=”main” để bao phần nội dung chính lại, trong đó chứa 2 div, 1 div với class=”nav” là phần menu, 1 div với class=”content” là phần nội dung. Cuối cùng sử dụng vùng div với id=”footer” để làm phần chân trang.id=”header” để tạo header. Để chắc ăn, bạn sử dụng 1 div với class=”main” để bao phần nội dung chính lại, trong đó chứa 2 div, 1 div với class=”nav” là phần menu, 1 div với class=”content” là phần nội dung. Cuối cùng sử dụng vùng div với id=”footer” để làm phần chân trang. ... <body> <div class="wrap"> <!-- sử dụng 1 div bao hết nội dung web lại --> <div id="header"> <!-- phần header --> DAMMIO.COM </div> <div class="main"> <!-- bao phần nội dung chính --> <div class="nav"> Nội dung menu </div> <div class="content"> Nội dung chính </div> </div> <!-- kết thúc nội dung chính --> <div id="footer"> <!-- phần header --> Bản quyền thuộc về DAMMIO.COM nhé các bạn! <3 <3 <3 </div> </div> <!-- sử dụng 1 div bao hết nội dung web lại --> </body> ... Định nghĩa phong cáchSau khi phân chia xong vùng div theo bố cục, giờ là lúc bạn định nghĩa phong cách cho từng vùng ở thẻ style nằm đầu trang. Mỗi thẻ div bạn cần phải có một số thông số như sau:
Ví dụ, tạo phong cách cho vùng div header như sau: <style>
...
/* id="header" thì phải định nghĩa bằng dấu # và tên id (header) */
#header
{
width: 980px; /* kích thước chiều rộng trang web */
float: left; /* canh div từ trái sang */
background-color: yellow; /* tạo màu để dễ nhìn */
}
...
</style>
...
Sau đây là đầy đủ đoạn mã với màu sắc các vùng để dễ nhìn, sau khi thiết kế xong có thể gỡ ra. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style>
body
{
margin: 0 auto; /* canh bố cục đều 2 bên */
padding: 0;
width: 980px;
}
.wrap
{
width: 980px; /* kích thước chiều rộng trang web */
float: left; /* canh div từ trái sang */
}
/* id="header" thì phải định nghĩa bằng dấu # và tên id (header) */
#header
{
width: 980px; /* kích thước chiều rộng trang web */
float: left; /* canh div từ trái sang */
background-color: yellow; /* tạo màu để dễ nhìn */
}
.main
{
width: 980px; /* kích thước chiều rộng trang web */
float: left; /* canh div từ trái sang */
}
/* chiều rộng của 2 vùng div "nav" và "content" phải bằng tổng độ rộng của trang */
/* chú ý padding, border, margin có thể ảnh hưởng đến độ rộng của trang web */
.nav
{
width: 280px; /* kích thước chiều rộng của vùng thanh bên */
float: left; /* canh div từ trái sang */
background-color: lightgreen; /* tạo màu để dễ nhìn */
}
.content
{
width: 700px; /* kích thước chiều rộng của vùng nội dung */
float: left; /* canh div từ trái sang */
background-color: lightblue; /* tạo màu để dễ nhìn */
}
#footer
{
width: 980px; /* kích thước chiều rộng của vùng nội dung */
float: left; /* canh div từ trái sang */
background-color: pink; /* tạo màu để dễ nhìn */
}
</style>
</head>
<body>
<div class="wrap"> <!-- sử dụng 1 div bao hết nội dung web lại -->
<div id="header"> <!-- phần header -->
<a href="https://www.dammio.com">DAMMIO.COM</a> <br/></br></br> <!-- dùng thẻ br để xuống dòng làm vùng to ra dễ nhìn -->
Phần Header id="header"
</div>
<div class="main"> <!-- bao phần nội dung chính -->
<div class="nav">
Nội dung menu <br/></br></br> Phần thanh bên trái class="nav"
</div>
<div class="content">
Nội dung chính <br/></br></br> Phần nội dung class="content"
</div>
</div> <!-- kết thúc nội dung chính -->
<div id="footer"> <!-- phần header -->
Bản quyền thuộc về <a href="https://www.dammio.com">DAMMIO.COM</a> nhé các bạn! <br/></br></br>
Phần chân trang id="footer"
</div>
</div> <!-- sử dụng 1 div bao hết nội dung web lại -->
</body>
</html>
Sau đây là giao diện trang web chỉ trang trí bằng đường viền border và bỏ nền màu sắc. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style>
body
{
margin: 0 auto; /* canh bố cục đều 2 bên */
padding: 0;
width: 982px;
}
.wrap
{
width: 982px; /* kích thước chiều rộng trang web */
float: left; /* canh div từ trái sang */
border:1px solid #AAA;
}
/* id="header" thì phải định nghĩa bằng dấu # và tên id (header) */
#header
{
width: 980px; /* kích thước chiều rộng trang web */
float: left; /* canh div từ trái sang */
border-bottom:1px dashed #AAA;
}
.main
{
width: 980px; /* kích thước chiều rộng trang web */
float: left; /* canh div từ trái sang */
}
/* chiều rộng của 2 vùng div "nav" và "content" phải bằng tổng độ rộng của trang */
/* chú ý padding, border, margin có thể ảnh hưởng đến độ rộng của trang web */
.nav
{
width: 279px; /* kích thước chiều rộng của vùng thanh bên */
float: left; /* canh div từ trái sang */
border-right:1px solid #999; /* tạo viền bên phải */
}
.content
{
width: 700px; /* kích thước chiều rộng của vùng nội dung */
float: left; /* canh div từ trái sang */
}
#footer
{
width: 980px; /* kích thước chiều rộng của vùng nội dung */
float: left; /* canh div từ trái sang */
border-top:1px dashed #AAA;
}
</style>
</head>
<body>
<div class="wrap"> <!-- sử dụng 1 div bao hết nội dung web lại -->
<div id="header"> <!-- phần header -->
<a href="https://www.dammio.com">DAMMIO.COM</a> <br/></br></br> <!-- dùng thẻ br để xuống dòng làm vùng to ra dễ nhìn -->
Phần Header id="header"
</div>
<div class="main"> <!-- bao phần nội dung chính -->
<div class="nav">
Nội dung menu <br/></br></br><br/></br></br><br/></br></br><br/></br></br> Phần thanh bên trái class="nav"
</div>
<div class="content">
Nội dung chính <br/></br></br><br/></br></br><br/></br></br><br/></br></br> Phần nội dung class="content"
</div>
</div> <!-- kết thúc nội dung chính -->
<div id="footer"> <!-- phần header -->
Bản quyền thuộc về <a href="https://www.dammio.com">DAMMIO.COM</a> nhé các bạn! <br/></br></br>
Phần chân trang id="footer"
</div>
</div> <!-- sử dụng 1 div bao hết nội dung web lại -->
</body>
</html>
Kết luậnBài viết giúp bạn đã hiểu và làm thế nào để sử dụng div để phân chia bố cục và xây dựng giao diện website. Tuy nhiên, với nội dung 1 bài như thế này thì khó có thể giúp các bạn hiểu hết về mọi trường hợp trong thiết kế giao diện web. Do đó, nếu bạn có thắc mắc xin để lại bình luận. Xin cảm ơn! |
