Bagaimana untuk menetapkan garis pemisah mendatar di bahagian hadapan web

Dalam pembangunan web, menetapkan garis pemisah mendatar adalah keperluan biasa untuk menjadikan kandungan halaman lebih jelas. Dalam pembangunan bahagian hadapan, kita boleh menggunakan CSS untuk menetapkan garis pemisah mendatar, dan melaraskan gaya serta kedudukannya mengikut keperluan.

1. Gunakan CSS untuk menetapkan garis pembahagi mendatar

Dalam CSS, anda boleh menggunakan atribut sempadan untuk menetapkan garisan pembahagi mendatar. Kaedah pelaksanaan khusus adalah seperti berikut:

hr {
  border: none; 
  border-top: 1px solid black; /*设置上边框的样式，颜色可以根据需要自行更改*/
  margin: 0px; /*设置边距，避免产生额外的间隔*/
}

Gunakan coretan kod ini untuk mencipta garis pembahagi mendatar gaya lalai dalam dokumen HTML. Anda boleh melaraskan gaya garis pemisah mendatar dengan menukar gaya atas sempadan dalam CSS.

Jika anda perlu menetapkan panjang garis pembahagi, anda boleh menggunakan atribut lebar, seperti berikut:

hr {
  width: 50%; /*分割线宽度，根据需要自行调整*/
  height: 2px; /*分割线高度，根据需要自行调整*/
  background-color: black; /*分割线颜色，根据需要自行调整*/
  border: none; 
  margin: 0px; 
}

2. Tetapkan kedudukan garis pemisah mendatar

Selain menetapkan garis pemisah mendatar Selain gaya, anda juga perlu mempertimbangkan lokasinya. Jika anda perlu meletakkan garis pemisah mendatar antara teks, anda boleh menambah garis pemisah mendatar sebelum teks yang perlu dibahagikan. Jika anda perlu meletakkan garis pemisah mendatar di tengah-tengah halaman, anda perlu meletakkannya di tengah-tengah bekas yang sepadan.

Tetapkan garis pemisah mendatar antara teks Anda boleh memasukkan teg jam dalam HTML, seperti berikut:

<p>段落文本。</p>
<hr>
<p>其他段落文本。</p>

Tetapkan garis pembahagi mendatar dalam bekas teg bekas yang sepadan, dan gayakan bekas. Seperti berikut:

<div class="container">
  <p>此处是容器的内容。</p>
  <hr>
</div>

.container {
  text-align: center; /*设置内容居中*/
}

3. Kesimpulan

Di atas ialah kaedah asas menggunakan CSS untuk menetapkan garisan pembahagi mendatar di bahagian hadapan web. Sebagai tambahan kepada kaedah yang diperkenalkan di atas, anda juga boleh menetapkan garis pemisah dengan menggunakan elemen pseudo, imej latar belakang, dsb. Datang dan cuba!

Atas ialah kandungan terperinci Bagaimana untuk menetapkan garis pemisah mendatar di bahagian hadapan web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!