Article Part
Some Detailed Text
Section Part
Some Text
Rumah >hujung hadapan web >html tutorial >Susun atur HTML
Susun atur HTML
- 王林asal
- 2024-09-04 16:15:39514semak imbas
Semasa mereka bentuk halaman web, kita mesti menyusun elemen halaman web dengan cara yang elegan. Mereka harus mudah dinavigasi untuk pengguna dan ringkas. Ia menyediakan cara untuk menyusun elemen ini dengan cara yang tersusun dengan baik. Reka letak HTML memberikan pandangan yang sangat baik kepada halaman web dan menyediakan cara mudah untuk mereka bentuk. Ia adalah cara mudah yang kami boleh mereka bentuk elemen web menggunakan tag HTML standard yang mudah. HTML menawarkan pelbagai elemen reka letak yang mana kami boleh mereka bentuk pelbagai bahagian halaman web.
Elemen Reka Letak HTML
Dalam artikel ini, kita akan melihat elemen reka letak yang berbeza dan contohnya. Menggunakan elemen ini, kami akan mereka bentuk struktur ringkas yang serupa dengan akhbar.
1.
Elemen ini digunakan untuk mentakrifkan pengepala halaman web. Ia mengandungi tajuk halaman atau beberapa logo atau mungkin kandungan pengenalan.
Kod:
<!DOCTYPE html> <html> <head> <title> EduCba </title> </head> <body> <header style = "height: 100px; width: 100%; background-color: #607D8B;" > <h1 style=" color: #fff; text-align: center; padding-top: 25px; font-size: 30px;" > Header Section</h1> </header> </body> </html>
Output:
2.
Elemen ini akan mengandungi pautan ke senarai menu. Elemen ini seperti bekas untuk pautan navigasi yang berbeza. Pautan akan berada pada halaman yang berbeza atau halaman yang sama.
Kod:
Mari kami menambah elemen navigasi di bawah pengepala contoh terakhir kami. Tambahkan
<head>
<style>
li{
display: inline-flex;
padding: 25px
}
ul{
text-align: center;
}
</style>
</head>
<body>
<nav style = "background-color: #607d8b70;" >
<ul>
<li> <a href = "#"> Navigation Link1 </a> </li>
<li> <a href = "#"> Navigation Link2 </a> </li>
<li> <a href = "#"> Navigation Link3 </a> </li>
</ul>
</nav>
</body>
Output:
3.
Elemen ini seperti bahagian utama halaman web. Ia boleh mengandungi apa-apa jenis maklumat. Ia boleh mengandungi teks, imej, dsb.
4.
Seperti namanya, elemen ini akan mengandungi kandungan seperti perenggan, sebarang penerangan terperinci tentang sesuatu atau apa-apa jenis maklumat. Secara amnya, ini akan menjadi bahagian utama yang mengandungi maklumat pada halaman web.
5.
Elemen ini akan menentukan kandungan di sisi kandungan utama, seperti bahagian atau artikel. Elemen maklumat ini adalah pilihan dan secara amnya mengandungi maklumat tambahan atau kandungan iklan.
Kod:
Mari tambahkan ketiga-tiga elemen ini bersama-sama di bawah bar navigasi.
<style>
li { display: inline-flex;
padding: 25px
}
section{
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
}
article{
width: 79%;
background-color: #607d8b70;
position: absolute;
top: 368px;
height: 150px;
}
aside{
background-color: #607d8b99;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
}
h2 , p {
text-align: center;
color: #9c27b0;
}
ul{
text-align: center;
}
</style>
<body>
<div class = "main" >
<section>
<h2> Section Part </h2>
<p> Some Text </p>
</section>
<article>
<h2> Article Part </h2>
<p> Some Detailed Text </p>
</article>
<aside>
<h2> Sidebar Part </h2>
<p> This will contain static part or anything like advertisement etc. </p>
</aside>
</div>
</body>
Output:
6.
Elemen ini memaparkan butiran tambahan tentang halaman web kepada pengguna. Ini mungkin mengandungi maklumat tambahan yang merupakan pilihan untuk pengguna. Unsur ini, secara lalai, menyediakan ciri untuk menunjukkan atau menyembunyikan butiran apabila mengklik.
7.
Elemen ini digunakan bersama dengan
Kod:
Mari kami menambah elemen butiran bersama-sama dengan elemen ringkasan dalam contoh sedia ada kami. Tambahkan kod di bawah selepas bahagian sisi kami dan bahagian elemen artikel dalam
tag.<body>
<details>
<summary> Summary: click here to show details</summary>
<p> Details: Upon clicking summary element, details will be shown to the user </p>
</details>
</body>
<style>
details {
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
}
details p {
font-size: 18px;
}
summary {
color: white;
font-size: 22px;
}
</style>
Output 1: Tanpa mengklik pada elemen butiran.
Output 2: Selepas mengklik pada elemen butiran.
8.
Akan ada satu bahagian di bahagian bawah setiap halaman web, yang dikenali sebagai pengaki.
Kod:
Mari kami menambah pengaki pada halaman web kami di bahagian bawah.
<footer style = " height: 100px; background-color:#607D8B; width: 100%; text-align: center;"> <h3 style = " color: #fff; text-align: center; padding-top: 10px; font-size: 30px; " >Footer Section</h3> <p> © Copyright ( Year ) </p> </footer>
Output:
Jadi kod terakhir kami dan outputnya akan kelihatan seperti ini,
Kod:
EduCba Header Section
Summary: click here to show details
Details: Upon clicking summary element, details will be shown to the user
Output:
Kesimpulan
Jadi elemen reka letak HTML sangat berguna semasa mereka bentuk halaman web. Mereka membantu pembangun untuk mereka bentuk halaman web yang tersusun dengan baik. Menggunakan elemen reka letak ini dengan betul meningkatkan pengalaman membaca halaman web. Kami telah melihat kebanyakan elemen reka letak HTML utama secara terperinci.
Atas ialah kandungan terperinci Susun atur HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bingkai HTMLArtikel seterusnya：Bingkai HTML