Di Internet, anda boleh melihat lajur berformat seperti surat khabar di mana-mana sahaja.
Kebanyakan tapak web boleh menggunakan elemen <div> untuk membuat berbilang lajur. CSS digunakan untuk meletakkan elemen atau mencipta latar belakang dan rupa berwarna-warni untuk halaman.
Gunakan elemen <div> untuk susun atur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#00FFFF;">
<h1 style="margin-bottom:0;">标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
</div>
<div id="content" style="background-color:#00FF00;height:200px;width:400px;float:left;">
内容</div>
<div id="footer" style="background-color:#FF00FF;clear:both;text-align:center;">
版权 © php.cn</div>
</div>
</body>
</html>
Gunakan jadual untuk reka letak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © php.cn</td>
</tr>
</table>
</body>
</html>
Reka Letak HTML - Petua Berguna
Petua: Kelebihan terbesar menggunakan CSS ialah jika anda menyimpan kod CSS dalam helaian gaya luaran, tapak akan lebih mudah diselenggara. Dengan mengedit satu fail, anda boleh menukar reka letak semua halaman. Untuk mengetahui lebih lanjut tentang CSS, lawati tutorial CSS kami
Petua: Memandangkan membuat reka letak lanjutan memakan masa, menggunakan templat ialah pilihan yang pantas. Terdapat banyak templat laman web percuma yang tersedia melalui enjin carian (anda boleh menggunakan reka letak tapak web pra-bina ini dan mengoptimumkannya).
bahagian seterusnya