susun atur HTML

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中文網(wǎng)(php.cn)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#00FFFF;">
<h1 style="margin-bottom:0;">標(biāo)題</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;">
內(nèi)容</div>
 
<div id="footer" style="background-color:#FF00FF;clear:both;text-align:center;">
版權(quán) ? php.cn</div>
 
</div>
 
</body>
</html>

Gunakan jadual untuk reka letak

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>標(biāo)題</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;">
內(nèi)容</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版權(quán) ? 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).

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>布局教程</title> <style type="text/css"> #Container{ width:1000px; margin:0 auto;/*設(shè)置整個(gè)容器在瀏覽器中水平居中*/ background:#CF3; } #Header{ height:80px; background:#093; } #logo{ padding-left:50px; padding-top:20px; padding-bottom:50px; } #Content{ height:600px; /*此處對(duì)容器設(shè)置了高度，一般不建議對(duì)容器設(shè)置高度，一般使用overflow:auto;屬性設(shè)置容器根據(jù)內(nèi)容自適應(yīng)高度，如果不指定高度或不設(shè)置自適應(yīng)高度，容器將默認(rèn)為1個(gè)字符高度，容器下方的布局元素（footer）設(shè)置margin-top:屬性將無效*/ margin-top:20px;/*此處講解margin的用法，設(shè)置content與上面header元素之間的距離*/ background:#0FF; } #Content-Left{ height:400px; width:200px; margin:20px;/*設(shè)置元素跟其他元素的距離為20像素*/ float:left;/*設(shè)置浮動(dòng)，實(shí)現(xiàn)多列效果，div+Css布局中很重要的*/ background:#90C; } #Content-Main{ height:400px; width:720px; margin:20px;/*設(shè)置元素跟其他元素的距離為20像素*/ float:left;/*設(shè)置浮動(dòng)，實(shí)現(xiàn)多列效果，div+Css布局中很重要的*/ background:#90C; } /*注：Content-Left和Content-Main元素是Content元素的子元素，兩個(gè)元素使用了float:left;設(shè)置成兩列，這個(gè)兩個(gè)元素的寬度和這個(gè)兩個(gè)元素設(shè)置的padding、margin的和一定不能大于父層Content元素的寬度，否則設(shè)置列將失敗*/ #Footer{ height:40px; background:#90C; margin-top:20px; } .Clear{ clear:both; } </style> </head> <body> <div id="Container"> <div id="Header"> <div id="logo">這里設(shè)置了padding屬性介紹一下padding的用法,padding將設(shè)置文本與邊框的距離。</div> </div> <div id="Content"> <div id="Content-Left">Content-Left</div> <div id="Content-Main">Content-Main</div> </div> <div class="Clear"></div> <div id="Footer">Footer</div> </div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik