susun atur HTML

Laman web yang kami buka dalam kehidupan seharian sentiasa teratur dan selesa untuk dilihat, tetapi adakah anda tahu bagaimana mereka melakukannya? Ia dibentangkan menggunakan elemen HTML kami + beberapa gaya css, jadi mari kita pelajari cara susun atur halaman hari ini.

Susun atur tapak web

Kebanyakan tapak web menyusun kandungan 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 adalah tidak disyorkan untuk digunakan sebagai alat reka letak - jadual bukan alatan reka letak.

Petua: Reka letak halaman web adalah sangat penting untuk menambah baik penampilan tapak web, Sila reka reka letak halaman web anda dengan teliti.

reka letak HTML - menggunakan <div> elemen

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

Contoh

Contoh berikut menggunakan lima elemen div untuk mencipta susun atur berbilang lajur dengan beberapa penggayaan CSS mudah:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<div id="container" style="width:400px">
<div id="header" style="background-color:#baff9e;">
    <h1 style="margin-bottom:0;">主要的网站标题</h1></div>
<div id="menu" style="background-color:#45caff;height:200px;width:150px;float:left;">
    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:250px;float:left;">
    这里是内容</div>
<div id="footer" style="background-color:#fdd8ff;clear:both;text-align:center;">
    版权 © php.cn</div>
</div>
</body>
</html>

Kod HTML di atas akan Menghasilkan hasil berikut:

Susun atur HTML menggunakan jadual

Komen : Elemen <jadual> tidak direka bentuk sebagai alat reka letak. Elemen

<jadual> digunakan untuk memaparkan data jadual.

Menggunakan elemen <table> boleh mencapai kesan reka letak kerana elemen jadual boleh digayakan melalui CSS:

Contoh

Gunakan <table> elemen untuk susun atur

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<table width="400" border="0">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
            <h1>网站标题</h1>
        </td>
    </tr>
    <tr>
        <td style="background-color:#FFD700;width:50px;">
            <b>网站菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </td>
        <td style="background-color:#EEEEEE;height:200px;width:350px;">
            网站内容</td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            版权 © php.cn</td>
    </tr>
</table>
</body>
</html>

Hasil jalankan kod:

Reka Letak HTML

Petua: Kelebihan terbesar menggunakan CSS ialah jika kod CSS disimpan 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).

Contohnya, menggunakan Bootstrap

Bootstrap ialah menggunakan rangka kerja CSS siap sedia.

Bootstrap ialah rangka kerja HTML, CSS dan JS yang paling popular untuk membangunkan web responsif.

Bootstrap membantu anda membangunkan tapak yang kelihatan hebat pada sebarang saiz: monitor, komputer riba, tablet atau telefon mudah alih:

Untuk mengetahui tentang Bootstrap, baca tutorial Bootstrap kami.

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <div id="container" style="width:400px"> <div id="header" style="background-color:#baff9e;"> <h1 style="margin-bottom:0;">主要的网站标题</h1></div> <div id="menu" style="background-color:#45caff;height:200px;width:150px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:250px;float:left;"> 这里是内容</div> <div id="footer" style="background-color:#fdd8ff;clear:both;text-align:center;"> 版权 © php.cn</div> </div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

susun atur HTML

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]