Rumah >hujung hadapan web >html tutorial >Cara menggunakan elemen peringkat blok dan elemen sebaris dengan betul untuk mencapai kesan reka letak halaman web
Cara menggunakan elemen peringkat blok dan elemen sebaris dengan betul untuk mencapai kesan reka letak halaman web
- WBOYasal
- 2024-01-07 08:10:56631semak imbas
Cara menggunakan elemen peringkat blok dan elemen sebaris dengan betul untuk mencapai kesan reka letak halaman web
Apabila meletakkan halaman web, kami sering menggunakan elemen tahap blok dan elemen sebaris. Elemen peringkat blok dan elemen sebaris ialah dua jenis elemen asas dalam HTML, dan ia memainkan peranan yang berbeza dalam reka letak halaman web. Artikel ini akan memperkenalkan secara terperinci cara menggunakan elemen peringkat blok dan elemen sebaris dengan betul untuk mencapai kesan reka letak halaman web dan memberikan contoh kod khusus.
1. Ciri dan senario aplikasi elemen peringkat blok
Elemen peringkat blok mempunyai ciri berikut:
- Setiap elemen peringkat blok akan menduduki barisnya sendiri, iaitu ia akan membalut secara automatik.
- Lebar elemen peringkat blok secara lalai kepada 100% elemen induk Anda boleh menyesuaikan lebar dengan menetapkan atribut lebar.
- Elemen peringkat blok boleh menetapkan pelbagai atribut model kotak, seperti jidar, padding, dsb.
- Elemen peringkat blok boleh menyusun elemen peringkat blok dan elemen sebaris yang lain.
Senario aplikasi biasa elemen peringkat blok termasuk:
- Struktur asas reka letak halaman: pengepala, navigasi, bahagian, artikel, tepi, pengaki, dsb.
- Blok teks: p, h1~h6, div, dsb.
- Senarai: ul, ol, dsb.
- Jadual: jadual, tr, td, dsb.
Berikut ialah contoh kod yang menggunakan elemen peringkat blok untuk melaksanakan reka letak halaman web:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 600px;
margin: 0 auto;
}
.header {
background-color: #f1f1f1;
height: 100px;
}
.sidebar {
background-color: #d3d3d3;
float: left;
width: 200px;
height: 400px;
}
.content {
background-color: #ffffff;
float: right;
width: 400px;
height: 400px;
}
.footer {
background-color: #f1f1f1;
clear: both;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="sidebar">侧边栏</div>
<div class="content">内容区域</div>
<div class="footer">底部</div>
</div>
</body>
</html>Dalam kod di atas, bekas ialah elemen peringkat blok, yang digunakan untuk mengandungi keseluruhan kandungan halaman. Pengepala, bar sisi, kandungan dan pengaki masing-masing mentakrifkan pengepala, bar sisi, kawasan kandungan dan bahagian bawah halaman web. Ia juga merupakan elemen peringkat blok. Dengan menetapkan atribut seperti lebar dan apungan, reka letak asas halaman dicapai.
.
Lebar elemen sebaris ditentukan oleh kandungannya dan lebar serta tinggi tidak boleh ditetapkan.
- Atribut model kotak elemen sebaris, seperti jidar, padding, dsb., adalah tidak sah dalam arah menegak.
- Elemen sebaris tidak boleh menyusun elemen peringkat blok, tetapi ia boleh menyarang elemen sebaris lain.
- Senario aplikasi biasa untuk elemen sebaris termasuk:
- Teks: span, a, em, strong, dsb.
Gambar: img.
- Elemen bentuk: input, butang, dsb.
- Berikut ialah contoh kod yang menggunakan elemen sebaris untuk melaksanakan reka letak halaman web:
- Dalam kod di atas, p ialah elemen sebaris dan teksnya dipusatkan dengan menetapkan atribut penjajaran teks ke tengah. Bekas ialah elemen peringkat blok sebaris Ia menggunakan atribut paparan:sebaris-blok, yang boleh dipaparkan dalam baris yang sama dan boleh menetapkan atribut seperti lebar, tinggi dan jidar. Butang ialah elemen sebaris Dengan menetapkan atribut seperti padding, warna latar belakang dan bucu bulat, gaya butang dilaksanakan.
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
}
.container {
display: inline-block;
border: 1px solid #000000;
padding: 20px;
}
.button {
background-color: #f1f1f1;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
color: #000000;
}
</style>
</head>
<body>
<p>这是一个居中的段落。</p>
<div class="container">
<h3>标题</h3>
<p>内容</p>
<a href="#" class="button">按钮</a>
</div>
</body>
</html>Atas ialah kandungan terperinci Cara menggunakan elemen peringkat blok dan elemen sebaris dengan betul untuk mencapai kesan reka letak halaman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!