[BÀI 7]Chia bố cục trang web với thẻ div và CSS

Bài hôm nay chúng ta tìm hiểu về cách định dạng khối bằng thẻ div với CSS.

Thẻ div là một thẻ được dùng để gom nhóm nhiều phần tử. Thường được dùng để tạo bố cục cho website.

Thẻ div nếu chỉ sử dụng trong html thì không có gì đặc biệt, cũng như chưa thể hiện được vai trò gì của nó. Còn khi sử dụng trong CSS, nó lại có vai trò rất quan trọng

Thẻ <div>, div là viết tắt của từ division ( khu ) được dùng để tạo một khu vực nào đó trên website, hoặc có thể gọi là gom nhóm các phần tử vào một khu vực.

Thông thường thì một website sẽ có 4 phần chính là header (hiển thị banner, logo), content (hiển thị nội dung),sidebar (cột bên cạnh nội dung) và footer (khu vực chân website). Vậy thì bây giờ mình có thể tạo ra 4 thẻ<div> với 4 id khác nhau nhằm chia khu vực ra. Trong mỗi khu vực mình có thể thêm nội dung riêng cho nó vào.

Ví dụ sử dụng thẻ div không có CSS :

<!DOCTYPE html>
<html lang="vi">
  <head>
    <title>Ví dụ về div</title>
    <meta charset="utf-8">
  </head>
  <body>
    <!--Phần #header-->
    <div id="header">
      <h1>Tiêu đề website</h1>
      <p>Mô tả của website</p>
    </div>
    <!--Kết thúc #header-->
    <!--Phần nội dung-->
    <div id="content">
      <p>Nội dung bài viết ở đây.</p>
    </div>
    <!--Kết thúc nội dung-->
    <!--Phần sidebar-->
    <div id="sidebar">
      <p>Đây là sidebar</p>
    </div>
    <!--Kết thúc sidebar-->
    <!--Phần chân trang-->
    <div id="footer">
      <p>DEVPRO.EDU.VN</p>
    </div>
    <!--Kết thúc chân trang-->
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Tiêu đề website</h1>

<p>Mô tả của website</p>

</div>

</div>

<p>Đây là sidebar</p>

</div>

<p>DEVPRO.EDU.VN</p>

</div>

</body>

</html>

Kết quả :

Kết quả không có gì đặc sắc đúng không? Tuy nhiên sau đây mình sẽ cho thêm một chút CSS vào nhé

Ví dụ tạo bố cục web bằng thẻ div có sử dụng CSS

<!DOCTYPE html>
<html lang="vi">
<head>
<title>Ví dụ về div</title>
<meta charset="utf-8">
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 1000px;
margin: 0 auto;
font-family: Helvetica, Arial,sans-serif;
font-size: 16px;
}
#header {
background: green;
color: white;
padding: 1em;
}
#content {
background: red;
color: white;
width: 596px;
float: left;
padding: 1em;
}
#sidebar {
background: yellow;
color: white;
width: 300px;
float: right;
padding: 1em;
}
#footer {
clear: both;
background: blue;
color: white;
padding: 1em;
}
</style>
<body>
<!--Phần #header-->
<div id="header">
<h1>Tiêu đề website</h1>
<p>Mô tả của website</p>
 </div>
<!--Kết thúc #header-->
<!--Phần nội dung-->
<div id="content">
<p>Nội dung bài viết ở đây.</p>
</div>
<!--Kết thúc nội dung-->
 <!--Phần sidebar-->
<div id="sidebar">
<p>Đây là sidebar</p>
</div>
<!--Kết thúc sidebar-->
<!--Phần chân trang-->
<div id="footer">
 <p>DEVPRO.EDU.VN</p>
 </div>
<!--Kết thúc chân trang-->
 </body>
</html>

<!DOCTYPE html>

<head>

</head>

* {

margin: 0;

padding: 0;

}

body {

width: 1000px;

margin: 0 auto;

font-family: Helvetica, Arial,sans-serif;

font-size: 16px;

}

#header {

background: green;

color: white;

padding: 1em;

}

#content {

background: red;

color: white;

width: 596px;

float: left;

padding: 1em;

}

#sidebar {

background: yellow;

color: white;

width: 300px;

float: right;

padding: 1em;

}

#footer {

clear: both;

background: blue;

color: white;

padding: 1em;

}

</style>

<body>

<h1>Tiêu đề website</h1>

<p>Mô tả của website</p>

</div>

</div>

<p>Đây là sidebar</p>

</div>

<p>DEVPRO.EDU.VN</p>

</div>

</body>

</html>

Kết quả :

Đã có sự khác biệt. Bố cục trang web được chia rõ ràng và đẹp mắt hơn.

Kết luận : Thẻ <div> có thể giúp bạn chia bố cục cho một trang web rõ ràng. Ở trên mình đã làm 2 ví dụ để các bạn có thể hiểu rõ hơn.

Để tìm hiểu chi tiết hơn, các bạn có thể tham khảo các khóa học tại đây.!!!

Chúc các bạn thành công!!!

Bài hôm nay chúng ta tìm hiểu về cách định dạng khối bằng thẻ div với CSS.

Related Posts

About The Author