bar langkah css

Dalam reka bentuk web, bar langkah ialah elemen navigasi biasa yang boleh membantu pengguna memahami dengan lebih baik lokasi semasa mereka dan langkah seterusnya. Dalam artikel ini, kami akan menunjukkan kepada anda cara membuat bar langkah mudah menggunakan CSS.

Pertama, kita memerlukan senarai dengan langkah, seperti ini:

<ul>
  <li>步骤一</li>
  <li>步骤二</li>
  <li>步骤三</li>
  <li>步骤四</li>
</ul>

Seterusnya, kita perlu menambah gaya pada bar langkah. Mula-mula, kami menambah gaya asas berikut pada senarai:

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

Kod CSS ini akan mengalih keluar gaya lalai senarai dan menetapkannya kepada reka letak fleksibel. Pada masa yang sama, kami menetapkan sifat justify-content kepada space-antara supaya item senarai akan diedarkan sama rata dalam bekas.

Seterusnya, kita perlu menggayakan item senarai, menambah bulatan dan nombor padanya. Berikut ialah kod penggayaan:

li {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #fff;
  position: relative;
}
li:before {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  height: 1px;
  width: 50%;
  background-color: #ccc;
}
li:first-child:before {
  display: none;
}
li.active {
  background-color: #f00;
}
li.active:before {
  background-color: #f00;
}

Di mana kami menetapkan lebar dan tinggi untuk item senarai dan menjadikannya bulat. Kami juga menetapkan sifat seperti penjajaran teks, keberanian fon, warna dan ketinggian baris. Kami juga menambah garis putus-putus sebelum setiap item senarai melalui CSS :before pseudo-element untuk memisahkan setiap langkah.

Akhir sekali, kami menggunakan kelas .aktif untuk menandakan item senarai langkah semasa dan menambah latar belakang merah serta ikon hadapan padanya melalui gaya tertentu.

Gaya bar langkah terakhir adalah seperti berikut:

Apabila menggunakan bar langkah, kita hanya perlu menambah kelas .aktif pada item senarai yang sepadan Boleh. Sebagai contoh, jika anda sedang dalam langkah kedua, anda boleh mengubah suai kod seperti berikut:

<ul>
  <li>步骤一</li>
  <li class="active">步骤二</li>
  <li>步骤三</li>
  <li>步骤四</li>
</ul>

Dengan tetapan gaya CSS di atas, kami boleh membuat bar langkah gaya tersuai dengan mudah untuk membantu pengguna memahami dengan lebih baik Di mana anda sekarang dan apakah langkah yang perlu anda ambil seterusnya.

Atas ialah kandungan terperinci bar langkah css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!