CSS Navigasi Langkah: Jadikan navigasi web lebih ringkas dan jelas

Dalam era Internet hari ini, navigasi halaman telah menjadi bahagian yang sangat diperlukan dalam reka bentuk web. Navigasi langkah ialah kaedah navigasi yang membahagikan kandungan halaman kepada beberapa langkah dan memberikan panduan yang jelas kepada pengguna. Ia bukan sahaja membolehkan pengguna memahami struktur halaman dengan lebih baik, tetapi juga meningkatkan kelancaran operasi pengguna dan mengurangkan kesukaran operasi pengguna. Dalam artikel ini, kita akan membincangkan pelaksanaan bahagian hadapan bagi navigasi langkah - navigasi langkah berasaskan CSS.

1. Latar Belakang

Navigasi langkah ialah kaedah navigasi yang membahagikan kandungan halaman kepada beberapa langkah dan memberikan panduan yang jelas kepada pengguna. Kaedah navigasi ini sering digunakan untuk membimbing pengguna melalui satu siri operasi yang kompleks. Senario yang sering muncul dalam aplikasi Internet, seperti proses pendaftaran, proses pesanan, proses pembayaran, dll.

Beritahu pengguna dengan jelas langkah mana mereka sekarang dan apakah langkah seterusnya, yang merupakan fungsi terpenting navigasi langkah. Jika pengguna mengenali dengan jelas langkah mana proses yang mereka lakukan, mereka akan mempunyai pemahaman yang lebih baik tentang perkara yang dilakukan oleh langkah itu dan bagaimana ia berkaitan dengan langkah lain, dan boleh mengesahkannya sebelum meneruskan ke langkah seterusnya.

Untuk mencapai matlamat ini, pembangun biasanya memaparkan navigasi langkah dalam pengepala atau bar sisi halaman. Dan sediakan butang yang boleh dipilih untuk setiap langkah untuk menggesa pengguna bahawa langkah itu sedang dijalankan atau telah selesai.

2. Pelaksanaan bahagian hadapan - Navigasi langkah berasaskan CSS

Dalam CSS, gaya ini boleh digunakan untuk melaksanakan navigasi langkah yang lengkap. Dalam bahagian ini, kita akan belajar cara menggunakan HTML dan CSS untuk mencipta navigasi langkah berasaskan CSS.

1. HTML

Apabila mencipta kod HTML, anda boleh menggunakan struktur asas berikut:

<div class="steps-navigation">
  <ul>
    <li class="active">
      <div class="step">
        <span>步骤1</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤2</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤3</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤4</span>
      </div>
    </li>
  </ul>
</div>

Dalam coretan kod ini, kami mencipta pakej Langkah navigasi dalam tag ul. Dalam li, setiap langkah ditunjukkan dengan nama yang dipanggil "langkah x". Antaranya, x mewakili bilangan langkah. Kami juga mencipta div yang dipanggil "langkah" dengan rentang bersarang di dalamnya untuk memegang nama langkah.

2. CSS

Dalam CSS, anda boleh menggunakan gaya berikut untuk mencipta navigasi langkah yang cantik.

.steps-navigation {
  margin: 0;
  padding: 0;
}
.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}
.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}
.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}
.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}
.steps-navigation ul li:last-child:before {
  display: none;
}
.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}
.steps-navigation ul li:first-child .step {
  margin-left: 0;
}
.steps-navigation ul li:last-child .step {
  margin-right: 0;
}

Kod di atas mengandungi banyak gaya, setiap satu dengan tujuan tertentu. Ini adalah sebahagian daripada memahami navigasi langkah CSS.

3. Penjelasan gaya

Di sini, kami menerangkan gaya satu demi satu.

.steps-navigation {
  margin: 0;
  padding: 0;
}

Fungsi bahagian ini adalah untuk menetapkan margin luar dan margin dalam navigasi langkah.

.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}

Fungsi bahagian ini adalah untuk menetapkan keserasian antara navigasi langkah dan elemen ul luar.

.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}

Fungsi bahagian ini adalah untuk menetapkan elemen li yang terkandung dalam setiap langkah. Ia menggunakan gaya display:table-cell untuk menjadikan elemen li sebagai elemen sebaris.

.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

Fungsi bahagian ini adalah untuk menetapkan elemen "step x" dan "span" dalam setiap langkah. Ia menggunakan banyak gaya untuk menetapkan sifatnya, termasuk lebar elemen, ketinggian, sempadan, latar belakang dan banyak lagi.

.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}

Fungsi bahagian ini adalah untuk menetapkan gaya langkah yang dipilih. Apabila langkah aktif (iaitu langkah semasa), warna latar belakang, warna fon, dll. juga akan berubah.

.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}

Fungsi bahagian ini adalah untuk menambah garisan pembahagi mendatar untuk setiap langkah.

.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}

Fungsi bahagian ini adalah untuk mengubah suai warna latar belakang garis pemisah mendatar di hadapannya apabila langkah itu aktif (iaitu, langkah semasa).

4. Ringkasan

Dalam artikel ini, kami membincangkan penggunaan CSS untuk mencipta pelaksanaan bahagian hadapan bagi navigasi langkah. Navigasi langkah ialah kaedah navigasi yang biasa digunakan dalam aplikasi Internet Ia membolehkan pengguna memahami struktur halaman dengan lebih baik, meningkatkan kelancaran operasi dan mengurangkan kesukaran operasi. Dengan menggunakan teknologi di atas, kami boleh mencipta antara muka pengguna yang lancar untuk tapak web atau aplikasi kami dan meningkatkan pengalaman pengguna. Berdasarkan navigasi langkah CSS, kami boleh melanjutkan pelaksanaan, seperti menggunakan JavaScript untuk menambah animasi atau kesan interaktif. Saya percaya ini akan menjadi pilihan yang baik untuk reka bentuk navigasi web anda!

Atas ialah kandungan terperinci CSS Navigasi Langkah: Jadikan navigasi web lebih ringkas dan jelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!