02/10/2018, 18:09
Tạo layout đơn giản bằng CSS & DIV
Để 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à sử dụng thẻ DIV và kết hợp với CSS. Bài viết này cung cấp một ví dụ đơn giản giúp chúng ta có thể nhanh chóng dựng một layout mà không tốn quá nhiều thời gian cho việc ...
Để 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à sử dụng thẻ DIV và kết hợp với CSS. Bài viết này cung cấp một ví dụ đơn giản giúp chúng ta có thể nhanh chóng dựng một layout mà không tốn quá nhiều thời gian cho việc design.
Ví dụ này trình bày cách thiết kế 1 layout gồm 3 phần: header, body, footer. Trong đó phần body gồmleft_body và main_body.
example.html
<head> <title>hmweb.com.vn</title> <link rel="stylesheet nofollow" href="example.css" mce_href="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
* { margin:0; } body { text-align:center; } #wrapper { margin:auto; awidth:800px; } #header { height:100px; background:#99CC66; } #footer { height:100px; background:#339933; } #body_left { float:left; awidth:100px; height:600px; background:#FF9900; } #body_main { float:left; awidth:700px; height:600px; background:#99CCFF; } .vide { clear:both; }
Như ta thấy ở trên, file html không có gì đặc biệt, nó chỉ bao gồm cấu trúc các thành phần mà ta cần bố trí,
còn bố trí như thế nào thì phụ thuộc hoàn toàn vào file CSS.
Bây giờ, ta sẽ tìm hiểu từng bước cách tạo layout trên:
- Tạo div #wrapper dùng để bao hàm toàn bộ trang web. Ta cần căn giữa div này trong cửa sổ để giúp trang web
của chúng ta thích ứng với nhiều loại màn hình và độ phân giải khác nhau. Để làm được điều này,
ta dùng margin:auto cho Firefox (vô dụng với IE ) và text-align:center trong body cho IE (vô dụng vơi FF ).
Cuối cùng, thuộc tính awidth quyết định độ rộng trang web.
- Tạo các div: #header, #footer, #body. Không có gì đặc biệt, chúng sẽ lấy hết độ rộng của #wrapper và bố trí
liên tiếp nhau từ trên xuống dưới:
<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à awidth. 2 div này sẽ bố trí liên tiếp nhau từ trái sang phải, nếu #body có đủ độ rộng:
<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 1 cách đầy bí ẩn . Thực ra nó ko biến đi đâu cả, có điều ta ko
nhìn thấy được vì 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 không 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 #footerxuố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 div "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ỗ:
<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>
OK! Vậy là ta đã dựng xong một layout mềm dẻo, với code html hết sức gọn gàng sáng sủa. Một đ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+awidth).
Ở ví dụ này, nếu #body_main có padding:5px thì #wrapper phải rộng ra thêm 10px nữa mới đủ chỗ,
nếu không nó sẽ nhảy xuống dưới .
Bình luận
Nguồn: thietkewebsmart.com
