Blog DX

Bài 1: HTML Layout

18 tháng 9, 2014
Layout nghĩa là bố trí, bố cục.
Việc bố trí nội dung cho một trang web là rất quan trọng. Nội dung thường được hiển thị trong nhiều cột và để làm việc đó chúng ta dùng <table> hoặc <div>

1. HTML layout dùng <table>

Việc sử dung <table> để phân chia bố cục thường không được sử dụng
Ví dụ:
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:red;">
<h1>Logo hay tiêu đề trang web</h1>
</td>
</tr>

<tr>
<td style="background-color:green;width:100px;">
<b>Menu</b><br>
Menu 1<br>
Menu 2<br>
Menu 3
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;text-align:center;">
Nội dung</td>
</tr>

<tr>
<td colspan="2" style="background-color:pink;text-align:center;">
©Blog DX</td>
</tr>
</table>

</body>
</html>
Kết quả:


2. HTML layout dùng <div>

Hầu như các trang web hiện nay đều sử dụng thẻ <div> để thiết kế bố cục

Ví dụ:
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:red;">
<h1 style="margin-bottom:0;">Logo hay tiêu đề trang web</h1></div>

<div id="nav" style="background-color:green;height:200px;width:100px;float:left;">
<b>Menu</b><br>
Menu 1<br>
Menu 2<br>
Menu 3<br>
</div>

<div id="section" style="background-color:#eeeeee;height:200px;width:400px;float:left;text-align:center;">
Nội dung</div>

<div id="footer" style="background-color:pink;;clear:both;text-align:center;">
©Blog DX</div>
</div>
</body>
</html>
Kết quả:

Không có nhận xét nào:

Đăng nhận xét