Cara menggunakan CSS untuk mencipta bar langkah yang cantik

Dengan peningkatan populariti tapak web moden, banyak tapak web memerlukan operasi berbilang langkah, seperti halaman pendaftaran, halaman pembayaran, dsb. Dalam keadaan sedemikian, untuk memberikan pengguna pengalaman pengendalian yang lebih baik, pengenalan bar langkah telah menjadi pilihan biasa. Bar langkah bukan sahaja boleh menyampaikan kemajuan semasa kepada pengguna, tetapi juga menyediakan pengguna dengan fungsi melihat operasi sejarah dan kembali ke langkah sebelumnya dengan mudah dan cepat. Oleh itu, bar langkah amat diperlukan apabila mereka bentuk halaman yang kompleks.

Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencipta bar langkah yang tampan, dan memperkenalkan secara terperinci teknik dan langkah yang terlibat.

Reka Bentuk dan Pelaksanaan Step Bar

Untuk mencipta bar langkah CSS, anda perlu mengikuti langkah berikut:

Langkah Pertama: Menulis Kod HTML

Dalam Dalam langkah ini, anda perlu menulis kod HTML untuk bar langkah, termasuk elemen bekas bar langkah dan elemen anak setiap langkah. Dalam elemen bekas bar langkah, kita perlu menggunakan teg "ul" untuk membuat senarai tidak tertib. Setiap langkah memerlukan penggunaan teg "li" sebagai elemen anak. Untuk menunjukkan kemajuan bar langkah, kita perlu menambah nombor atau pengecam lain yang mewakili kemajuan semasa dalam setiap elemen anak (seperti yang ditunjukkan dalam Rajah 1 Pengecam boleh menjadi ikon, warna atau bar kemajuan).

<ul class="progress">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
</ul>

Rajah 1: Contoh pengecam langkah

Langkah 2: Penulisan CSS

Dalam langkah ini, anda perlu menulis helaian gaya CSS untuk mereka bentuk langkah Gaya bar. Reka bentuk CSS bar langkah terdiri daripada dua bahagian: pengecam langkah dan bar langkah itu sendiri.

Untuk reka bentuk pengecam langkah, pelbagai kaedah boleh digunakan, seperti menggunakan ikon atau imej, nombor atau elemen lain yang mewakili kemajuan atau bar kemajuan. Berikut ialah satu contoh:

.progress li::before {
  content: ' ';
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}

.progress li:first-child::before {
  border-color: #7f8fa4;
}

.progress li.active::before {
  background-color: #3498db;
  color: #fff;
}

Rajah 2: Contoh gaya untuk pengecam langkah

Dalam contoh ini, kami telah menggunakan ikon bulat untuk mewakili setiap langkah. Untuk mencipta ikon bulat, kami menggunakan kelas pseudo CSS "::before" untuk mencipta elemen pseudo di hadapan elemen li. Kami menggunakan sifat "ketinggian" dan "lebar" untuk menetapkan ketinggian dan lebar ikon, dan sifat "ketinggian garis" untuk memusatkan ikon secara menegak. Gunakan atribut "margin" untuk memusatkan elemen secara menegak dalam elemen induknya. Dengan sifat "jejari sempadan" kita boleh menukar rupa elemen supaya kelihatan bulat. Untuk memilih pengecam langkah, kami menggunakan kelas pseudo ":first-child" untuk memilih elemen li pertama.

Untuk reka bentuk bar langkah itu sendiri, kita boleh menggunakan pelbagai kaedah untuk mencapainya. Di sini, kami menggunakan bar kemajuan segi empat tepat untuk mewakili kemajuan semasa. Berikut ialah contoh menggunakan warna latar belakang dan atribut bayang:

.progress {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.progress li {
  flex: 1;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.progress li:not(:last-child):after {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(50% + 10px);
  width: calc(100% - 10px);
  height: 4px;
  background-color: #e0e0e0;
  z-index: -1;
}

.progress li.active {
  font-weight: bold;
}

.progress li.active:not(:last-child):after {
  background-color: #3498db;
}

Rajah 3: Contoh bar langkah

Dalam contoh ini, kami menggunakan atribut "flex" untuk mengatur langkah simbol secara mendatar. Kami menggunakan atribut "gaya senarai" untuk menyembunyikan bulet lalai daripada elemen ul. Kami menggunakan sifat "margin" dan "padding" untuk menetapkan margin dan padding bar langkah. Kami juga menambahkan latar belakang cahaya dan kesan bayang pada bar langkah menggunakan sifat "warna latar belakang" dan sifat "bayang-kotak".

Untuk setiap elemen langkah, kami menggunakan atribut "flex: 1" untuk menyusun sama rata simbol langkah dalam bar langkah. Kami juga menggunakan atribut "saiz fon" untuk menetapkan saiz fon bagi simbol langkah dan atribut "selaraskan teks" untuk menyelaraskan tengah simbol langkah. Gunakan atribut "kedudukan" untuk kedudukan relatif dan elemen pseudo ":not(:last-child):after" untuk menambah bar kemajuan untuk semua kecuali langkah terakhir. Gunakan elemen pseudo ":selepas" untuk menambah elemen pseudo di dalam elemen. Gunakan atribut "atas" dan "kiri" untuk meletakkan elemen pseudo di sebelah kanan tengah simbol langkah. Tetapkan dimensi unsur pseudo melalui sifat "lebar" dan "tinggi". Gunakan atribut "warna latar belakang" untuk menetapkan warna bagi elemen pseudo. Tetapkan atribut "z-index" kepada nombor negatif supaya simbol langkah menindih elemen pseudo. Untuk memilih elemen bar langkah, kami menggunakan kelas pseudo ":aktif" untuk memilih elemen li yang sedang aktif.

Langkah Tiga: Susulan Reka Bentuk Interaksi

Memandangkan reka bentuk bar langkah hampir dilaksanakan, kami perlu menyemak keseluruhan reka bentuk interaksi untuk memastikan setiap langkah dipautkan dengan betul kepada halaman Borang yang sepadan. Jika tapak anda berada dalam peringkat reka bentuk yang mengutamakan mudah alih, pastikan gaya bar langkah berskala dengan betul. Anda juga boleh mempertimbangkan untuk menambah kesan animasi untuk meningkatkan kesan interaktif bar langkah untuk meningkatkan pengalaman pengguna.

Kesimpulan

Dalam artikel ini, kami membincangkan beberapa langkah yang perlu untuk mereka bentuk bar langkah menggunakan CSS. Untuk reka bentuk bar langkah, kami terutamanya menggunakan HTML dan CSS untuk mencipta dan menghasilkan. Kami perlu berusaha untuk mereka bentuk bar langkah untuk membolehkan pengguna memahami operasi yang mereka lakukan, dengan itu membantu pengguna menyelesaikan operasi yang diperlukan dengan cara yang lebih menjimatkan masa dan menjimatkan usaha. Sudah tentu, berdasarkan reka bentuk bar langkah, kami juga boleh menggabungkannya dengan banyak elemen interaktif lain untuk meningkatkan lagi interaktiviti tapak web.

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencipta bar langkah yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!