简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

susun atur HTML

Layout HTML

Layout halaman web adalah sangat penting untuk menambah baik penampilan tapak web.

Sila reka reka letak halaman web anda dengan teliti.

Reka Letak Laman Web

Kebanyakan tapak web akan menyusun kandungannya ke dalam berbilang lajur (sama seperti majalah atau akhbar).

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.



Walaupun kita boleh menggunakan teg jadual HTML untuk mereka bentuk reka letak yang cantik, teg jadual tidak disyorkan sebagai alat susun atur - Jadual tidak alatan susun atur.

Reka Letak HTML - Menggunakan Elemen <div>

Elemen div ialah elemen peringkat blok yang digunakan untuk mengumpulkan elemen HTML.

Contoh berikut menggunakan lima elemen div untuk mencipta susun atur berbilang lajur: 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#cc6666;}
div#menu {background-color:#99CCFF; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>网站头部图片，标题</h1>
</div>
<div id="menu">
<h2>菜单</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">内容</div>
<div id="footer">底部</div>
</div>
</body>
</html>

Susun atur HTML - menggunakan jadual

Menggunakan teg <table> HTML ialah cara mudah untuk membuat reka letak.

Anda boleh menggunakan elemen <div> atau <jadual> CSS digunakan untuk meletakkan elemen atau mencipta latar belakang dan rupa berwarna-warni untuk halaman.

Petua: Walaupun anda boleh menggunakan jadual HTML untuk mencipta reka letak yang cantik, jadual direka bentuk untuk mempersembahkan data berjadual - jadual bukan alatan reka letak!

Contoh berikut menggunakan jadual dengan tiga baris dan dua lajur - baris pertama dan terakhir menggunakan atribut colspan untuk merentangi dua lajur:

Contoh

<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>网站头部图片，标题</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
内容</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
标题</td>
</tr>
</table>
</body>
</html>


Dua kaedah berbeza, tetapi kesannya adalah sama.

Reka Letak HTML - Petua Berguna

Petua: Manfaat terbesar menggunakan CSS ialah tapak akan lebih mudah diselenggara jika kod CSS disimpan dalam helaian gaya luaran. 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 boleh 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
||
<!DOCTYPE html> <html> <head> <style type="text/css"> div#container{width:500px} div#header {background-color:#cc6666;} div#menu {background-color:#99CCFF; height:200px; width:100px; float:left;} div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;} div#footer {background-color:#99bbbb; clear:both; text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0; font-size:14px;} ul {margin:0;} li {list-style:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>网站头部图片，标题</h1> </div> <div id="menu"> <h2>菜单</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">内容</div> <div id="footer">底部</div> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492119 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！