Trước kia việc thiết kế bố cục trang web thường sử dụng các bảng, nhưng hiện tại để tăng sự mềm dẻo cho trang web, hiện nay người ta đang cố gắng loại bỏ các table khi thiết kế layout, thay vào đó là div và css.
Code
<head>
<title>Example</title>
<link rel=”stylesheet” href=”/cntt/example.css” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>header</div>
<div id=”body”>
<div id=”body_left”>body_left</div>
<div id=”body_main”>body_main</div>
<div class=”vide”></div>
</div>
<div id=”footer”>footer</div>
</div>
</body>
</html>
example.css
Code:
* {
margin:0;
}
body {
text-align:center;
}
#wrapper {
margin:auto;
width:800px;
}
#header {
height:100px;
background:#99CC66;
}
#footer {
height:100px;
background:#339933;
}
#body_left {
float:left;
width:100px;
height:600px;
background:#FF9900;
}
#body_main {
float:left;
width:700px;
height:600px;
background:#99CCFF;
}
.vide {
clear:both;
}
Code:
<div id=”wrapper”>
<div id=”header”></div>
<div id=”body”></div>
<div id=”footer”></div>
</div>
- Bây giờ trong div #body, ta sẽ chia làm 2 cột bằng cách tạo 2 div #body_left và #body_main với 2 thuộc tính float (trôi nổi) và width. 2 div này sẽ bố trí liên tiếp nhau từ trái sang phải, nếu #body có đủ độ rộng:
<title>Example</title>
<link rel=”stylesheet” href=”/cntt/example.css” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>header</div>
<div id=”body”>
<div id=”body_left”>body_left</div>
<div id=”body_main”>body_main</div>
<div class=”vide”></div>
</div>
<div id=”footer”>footer</div>
</div>
</body>
</html>
example.css
Code:
* {
margin:0;
}
body {
text-align:center;
}
#wrapper {
margin:auto;
width:800px;
}
#header {
height:100px;
background:#99CC66;
}
#footer {
height:100px;
background:#339933;
}
#body_left {
float:left;
width:100px;
height:600px;
background:#FF9900;
}
#body_main {
float:left;
width:700px;
height:600px;
background:#99CCFF;
}
.vide {
clear:both;
}
Code:
<div id=”wrapper”>
<div id=”header”></div>
<div id=”body”></div>
<div id=”footer”></div>
</div>
- Bây giờ trong div #body, ta sẽ chia làm 2 cột bằng cách tạo 2 div #body_left và #body_main với 2 thuộc tính float (trôi nổi) và width. 2 div này sẽ bố trí liên tiếp nhau từ trái sang phải, nếu #body có đủ độ rộng:
Code sử dụng thẻ DIV
<div id=”wrapper”>
<div id=”header”></div>
<div id=”body”>
<div id=”body_left”></div>
<div id=”body_main”></div>
</div>
<div id=”footer”></div>
</div>
- Vấn đề bắt đầu nảy sinh: #footer biến mất. Thực ra nó đã bị #body_left và #body_main che mất. Lý do: #body tuy bao hàm #body_left và #body_main, nhưng chiều cao của nó lại ko phụ thuộc vào chiều cao của #body_left hay #body_main (do thuộc tính “trôi nổi” của chúng). #footer nằm sát dưới #body, mà #body có height 0, cho nên #footer sẽ nằm sát dưới #header, và bị #body_left và #body_main che khuất.
Dĩ nhiên ta có thể đặt height cho #body bằng với height của #body_left và #body_main để đẩy #footer xuống đúng chỗ. Tuy nhiên #body_left và #body_main thường có height thay đổi (phụ thuộc vào nội dung của chúng), và height của chúng thường cũng không bằng nhau. Cho nên ta chọn giải pháp là đặt thêm 1 div đặc biệt với thuộc tính clear:both bên dưới. Với thuộc tính clear:both, div đặc biệt này sẽ luôn nằm sát dưới 2 thằng “trôi nổi” kia. #body lại luôn phải bao hàm div đặc biệt này, do đó, nó sẽ luôn có height bằng với height lớn nhất của #body_left và #body_main. Nhờ vậy, #footer luôn được định vị đúng chỗ:
Code:
<div id=”wrapper”>
<div id=”header”></div>
<div id=”body”>
<div id=”body_left”></div>
<div id=”body_main”></div>
<div class=”vide”></div>
</div>
<div id=”footer”></div>
</div>
Vậy là ta đã dựng xong 1 layout Bố cục trang web sử dụng thẻ DIV ngon lành mềm dẻo, với code html hết sức gọn gàng sáng sủa. 1 điều cần lưu ý là khi bố trí các div tạo cột, cần tính với độ rộng bao ngoài của div đó (margin+border+padding+width).
<div id=”header”></div>
<div id=”body”>
<div id=”body_left”></div>
<div id=”body_main”></div>
</div>
<div id=”footer”></div>
</div>
- Vấn đề bắt đầu nảy sinh: #footer biến mất. Thực ra nó đã bị #body_left và #body_main che mất. Lý do: #body tuy bao hàm #body_left và #body_main, nhưng chiều cao của nó lại ko phụ thuộc vào chiều cao của #body_left hay #body_main (do thuộc tính “trôi nổi” của chúng). #footer nằm sát dưới #body, mà #body có height 0, cho nên #footer sẽ nằm sát dưới #header, và bị #body_left và #body_main che khuất.
Dĩ nhiên ta có thể đặt height cho #body bằng với height của #body_left và #body_main để đẩy #footer xuống đúng chỗ. Tuy nhiên #body_left và #body_main thường có height thay đổi (phụ thuộc vào nội dung của chúng), và height của chúng thường cũng không bằng nhau. Cho nên ta chọn giải pháp là đặt thêm 1 div đặc biệt với thuộc tính clear:both bên dưới. Với thuộc tính clear:both, div đặc biệt này sẽ luôn nằm sát dưới 2 thằng “trôi nổi” kia. #body lại luôn phải bao hàm div đặc biệt này, do đó, nó sẽ luôn có height bằng với height lớn nhất của #body_left và #body_main. Nhờ vậy, #footer luôn được định vị đúng chỗ:
Code:
<div id=”wrapper”>
<div id=”header”></div>
<div id=”body”>
<div id=”body_left”></div>
<div id=”body_main”></div>
<div class=”vide”></div>
</div>
<div id=”footer”></div>
</div>
Vậy là ta đã dựng xong 1 layout Bố cục trang web sử dụng thẻ DIV ngon lành mềm dẻo, với code html hết sức gọn gàng sáng sủa. 1 điều cần lưu ý là khi bố trí các div tạo cột, cần tính với độ rộng bao ngoài của div đó (margin+border+padding+width).
CHÀO BẠN! BẠN GIÚP MÌNH SỬA LỖI MENU NÀY VỚI
Trả lờiXóahttps://myphamhoaithanh.blogspot.com/search/label/Ch%C4%83m%20s%C3%B3c%20da%20m%E1%BA%B7t
KHI BẤM VÀO MENU SẢN PHẨM THÌ BỊ BÀI ĐĂNG CHE KHUẤT
MÌNH KHÔNG RÀNH VỀ CSS NÊN TÌM KHÔNG RA