Bagaimana untuk menggunakan div dalam html

<p>HTML ialah asas pembangunan web dan <div> ialah salah satu teg yang paling biasa dalam HTML. Ia bermaksud "bahagian" dan mewakili blok bebas halaman. Dalam artikel ini, kami akan meneroka penggunaan teg <div> dan cara menggunakannya dalam HTML dan CSS untuk meningkatkan reka letak dan reka bentuk halaman.

<p>Sintaks asas:

<div>
  这里是内容
</div>

<p>Ini ialah contoh sintaks <div> paling asas. Anda boleh meletakkan semua jenis kandungan dalam <div> teg, seperti teks, imej, borang, elemen HTML lain, dsb. Ia juga boleh bersarang dalam <div> lain untuk menjadikan halaman lebih mudah difahami dan disusun.

<p>Seterusnya, kita akan melihat pada kod sampel <div> dan menambahkan lembaran gaya CSS padanya.

<p>HTML

<div class="container">
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
  <button>点击我</button>
</div>

<p>CSS

.container {
  background-color: #eee;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
}

<p>Teg <div> dikunci ke dalam lembaran gaya CSS dengan kelas " bekas ". Dengan cara ini, kita boleh menambah gaya yang bagus pada <div> dan menggayakannya supaya lebih mudah dibaca. Sebagai contoh, kami telah menentukan .container dengan latar belakang kelabu, jidar hitam, padding 10px dan jarak 20px.

<p> Kelebihan menggunakan <div> - Reka Letak

<p> Dalam CSS, kita boleh menggunakan <div> sebagai bekas untuk position:relative. Ini membolehkan kami mencipta elemen kanak-kanak yang berada pada kedudukan yang agak pada bekas. Berikut ialah coretan kod contoh di mana kita boleh menggunakan <div> untuk mempertingkatkan reka bentuk.

<p>HTML

<div class="container">
  <div class="item">
    <h2>第一个项目</h2>
    <p>这是第一个项目的说明。</p>
  </div>
  <div class="item">
    <h2>第二个项目</h2>
    <p>这是第二个项目的说明。</p>
  </div>
  <div class="item">
    <h2>第三个项目</h2>
    <p>这是第三个项目的说明。</p>
  </div>
</div>

<p> Kami menggunakan <div> (.item) untuk mencipta bekas bagi setiap item dan susun aturnya ke dalam grid menggunakan CSS.

<p>CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

<p>Ini menukar yang berikut kepada apa yang kita lihat:

<p>

<p>Faedah menggunakan <div> - pemilih

<p> Apabila digunakan dengan CSS, menggunakan <div> boleh membantu kami memilih elemen dengan lebih baik. Sebagai contoh, kami cuba menggayakan teg <p> kedua, tetapi ia berada di dalam <div> dan mungkin masih mempunyai gaya yang sama apabila dicampur dengan teg <p> daripada kelas lain.

<p>HTML

<div class="container">
  <p>这是第一个段落。</p>
  <div>
    <p>这是第二个段落。</p>
  </div>
  <p>这是第三个段落。</p>
</div>

<p>CSS

p {
  font-size: 18px;
}

<p>Dalam kod ini, kami menetapkan saiz fon kepada 18px untuk semua <p> teg.

<p>Jika kita hanya mahu menetapkan saiz perenggan kedua kepada 16px, kita boleh menggunakan coretan CSS berikut:

<p>CSS

.container div p {
  font-size: 16px;
}

<p>Ini akan membolehkan kami memilih hanya <div> Tandai perenggan di dalam dan kemudian tambahkan gaya tertentu padanya. Dengan cara ini kita boleh memilih kandungan yang perlu digayakan dengan lebih baik.

<p> Ringkasan

<p> Dalam artikel ini, kami membincangkan sintaks teg <div> asas dalam HTML, faedah menggunakan <div> dan cara menggunakannya dalam reka letak dan reka bentuk halaman. Kami juga menunjukkan contoh meningkatkan <div> dengan CSS dan pemilih untuk menjadikannya lebih mudah untuk disusun dan direka bentuk. Teg <div> boleh menjadikan HTML lebih mudah difahami dan lebih mudah dibaca serta menyediakan banyak fungsi berguna. Kini, anda sepatutnya mempunyai pemahaman yang lebih baik tentang cara menggunakan <div> untuk mencipta reka letak dan reka bentuk halaman yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan div dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!