Việc dựng layout chuẩn hiện nay là dựng layout bằng thẻ DIV. Nghe thì có vẻ hơi phức tạp vì các thẻ DIV không giống như Table, hay chạy qua lại và cũng rất khó canh chỉnh... nhưng thực sự ra rất dễ các bạn ạ, chỉ cần làm theo một vài nguyên tắc là được.
Dựng thẻ DIV có thẻ Wrapper bao ngoài (cách này thông dụng)
Đây là Layout chúng ta sẽ dựng (nhìn hơi đơn giản một chút phải không các bạn, nhưng khi thêm nội dung vào thì rất đẹp đấy):
Nào bắt đầu nhé:
Bước 1: Các bạn sẽ phải dựng một cấu trúc HTML trước, ở đây mã HTML cho Layout trên tôi trình bày đơn giản như sau:
<div id="wrapper">
<div id="Top">Content for id "Top" Goes Here</div>
<div id="Left">Content for id "Left" Goes Here</div>
<div id="Content">Content for id "Content" Goes Here</div>
<div id="Right">Content for id "Right" Goes Here</div>
<div id="Footer">Content for id "Footer" Goes Here</div>
</div>
Giải thích: thẻ wrapper bao bên ngoài giúp ta gói gọn các thẻ DIV khác bên trong giữ cho các thẻ không chạy lung tung, khi dựng layout tôi trình bày từ trên xuống, từ trái qua phải.
Bước 2: chúng ta sẽ định dạng CSS cho các thẻ DIV:
Mã CSS như sau:
<style type="text/css">
*{
margin:0px;
}
#wrapper {
margin: auto;
height: auto;
width: 1000px;
overflow:auto;
}
#wrapper #Top {
background-color: #06F;
height: 100px;
width: 100%;
}
#wrapper #Left {
background-color: #FC0;
float: left;
height: 500px;
width: 150px;
margin-top: 10px;
}
#wrapper #Content {
background-color: #F9F;
float: left;
width: 680px;
height:500px;
margin-top: 10px;
margin-left: 10px;
}
#wrapper #Right {
background-color: #66F;
float: right;
width:150px;
height: 500px;
margin-top: 10px;
margin-left:10px;
}
#wrapper #Footer {
float: left;
width: 100%;
height:100px;
margin-top: 10px;
background-color: #3C9;
}
</style>
Giải thích:
- Ban đầu tôi sẽ reset lại margin cho trang WEB bằng cách set nó về 0px;
*{
margin:0px;
}
- Tôi định dạng thẻ Wrapper, thiết lập chiều ngang là 1000px; margin là auto để canh giữa trang WEB; over-flow là: auto để thẻ Wrapper sẽ co giãn tự động bao lấy các thẻ trong nó(thuộc tính này khá quan trọng, nếu bạn nhận thấy thẻ bao ngoài của bạn ko co giãn hoặc thẻ bên dưới nhảy lên thì hãy thử đưa thuộc tính này vào các thẻ bên trên để chúng co giãn đẩy nhau ra chứ không nằm chồng lên nhau).
#wrapper {
margin: auto;
height: auto;
width: 1000px;
overflow:auto;
}
- Các thẻ còn lại chỉ là set kích thước, tôi set cố định chiều cao cho các thẻ là để bài Lab dễ nhìn, khi dựng thực tế bạn tùy theo nội dung mà set chiều cao cho các thẻ DIV hoặc để auto để chiều cao tự co giãn theo nội dung.
Code toàn bộ Layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DNGAZ.com - DIV Layout</title>
<style type="text/css">
*{
margin:0px;
}
#wrapper {
margin: auto;
height: auto;
width: 1000px;
overflow:auto;
}
#wrapper #Top {
background-color: #06F;
height: 100px;
width: 100%;
}
#wrapper #Left {
background-color: #FC0;
float: left;
height: 500px;
width: 150px;
margin-top: 10px;
}
#wrapper #Content {
background-color: #F9F;
float: left;
width: 680px;
height:500px;
margin-top: 10px;
margin-left: 10px;
}
#wrapper #Right {
background-color: #66F;
float: right;
width:150px;
height: 500px;
margin-top: 10px;
margin-left:10px;
}
#wrapper #Footer {
float: left;
width: 100%;
height:100px;
margin-top: 10px;
background-color: #3C9;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="Top">Content for id "Top" Goes Here</div>
<div id="Left">Content for id "Left" Goes Here</div>
<div id="Content">Content for id "Content" Goes Here</div>
<div id="Right">Content for id "Right" Goes Here</div>
<div id="Footer">Content for id "Footer" Goes Here</div>
</div>
</body>
</html>
Ngoài ra cũng có một số cách thức khác để dựng Layout, tùy vào từng yêu cầu cụ thể mà chúng ta sẽ thay đổi cấu trúc thẻ DIV và định dạng CSS.