bar langkah css

Dalam proses reka bentuk web, bar langkah sering digunakan sebagai elemen navigasi untuk operasi pengguna, terutamanya dalam borang berbilang langkah dan proses membeli-belah. Membuat bar langkah biasanya memerlukan penggunaan teknologi CSS. Artikel ini akan memperkenalkan beberapa kaedah CSS untuk membuat bar langkah, membolehkan anda mencapai kesan bar langkah pada halaman web dengan mudah.

Kaedah 1: Gunakan senarai tidak tertib

Senarai tidak tersusun (<ul>) ialah salah satu kaedah biasa untuk membuat bar langkah. Kodnya adalah seperti berikut:

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

Dalam CSS, kita boleh menggunakan kod berikut untuk mengawal gaya bar langkah:

.step li{
  list-style:none;
  display:inline-block;
  width:30px;
  height:30px;
  background:#fff;
  color:#555;
  text-align:center;
  line-height:30px;
  border-radius:50%;
  margin-right:10px;
  position:relative;
}
.step li.active:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid #3c8dbc;
  position:absolute;
  top:10px;
  left:-10px;
}
.step li.active:after {
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#3c8dbc;
  top:7px;
  left:7px;
}

Kod ini mengawal gaya teks bar langkah dan dipilih negeri masing-masing. Antaranya, bahagian .step li mentakrifkan gaya item senarai tidak tersusun, termasuk paparan sebagai elemen peringkat blok sebaris, lebar dan tinggi, warna latar belakang, pemusatan teks mendatar dan menegak, sudut bulat dan jarak, dsb.; dan .step li.active:before tentukan Gaya item langkah yang dipilih. Dengan pemilih .step li.active:after dan :before, kami boleh menambah anak panah dan titik di sebelah kiri item yang dipilih. :after

Kaedah 2: Gunakan reka letak fleksibel

Reka letak fleksibel ialah teknologi reka letak CSS moden yang dapat merealisasikan keperluan reka letak yang kompleks dalam reka bentuk web dengan lebih baik. Gunakan susun atur flex untuk membuat bar langkah, kodnya adalah seperti berikut:

<div class="step flex">
  <div class="circle active">1</div>
  <div class="circle">2</div>
  <div class="circle">3</div>
</div>

Kod CSS adalah seperti berikut:

.step.flex{
  display:flex;
  justify-content:space-between;
}
.circle{
  width:25px;
  height:25px;
  background:#fff;
  color:#555;
  border:2px solid #ccc;
  border-radius:50%;
  text-align:center;
  line-height:25px;
  position:relative;
}
.circle:after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ccc;
  top:9px;
  left:9px;
  display:none;
}
.circle.active{
  background:#3c8dbc;
  color:#fff;
  border-color:#3c8dbc;
}
.circle.active:after{
  display:block
}

Dalam kod ini, kami menggunakan reka letak Flex dan tetapkan

kepada justify-content, yang mengagihkan jarak antara setiap bulatan secara sama rata dalam ruang bekas bekas. Gunakan pemilih space-between dan .circle untuk mengawal gaya bulatan dan gunakan pemilih .circle.active untuk memaparkan titik kecil pada kalangan yang dipilih. :after

Kaedah Tiga: Gunakan Rangka Kerja Bootstrap

Bootstrap ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak komponen CSS dan JavaScript yang berguna, termasuk pilihan untuk membuat bar langkah. Untuk mencipta bar langkah menggunakan rangka kerja Bootstrap, anda perlu memasukkan fail CSS dan JS Bootstrap dalam kod anda, kemudian gunakan kod berikut untuk mencipta bar langkah:

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-step1-tab" data-toggle="pill" href="#pills-step1" role="tab" aria-controls="pills-step1" aria-selected="true">Step 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-step2-tab" data-toggle="pill" href="#pills-step2" role="tab" aria-controls="pills-step2" aria-selected="false">Step 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-step3-tab" data-toggle="pill" href="#pills-step3" role="tab" aria-controls="pills-step3" aria-selected="false">Step 3</a>
  </li>
</ul>

Kod ini menggunakan

komponen rangka kerja Bootstrap dan menggunakan atribut nav-pills dan active digunakan untuk menentukan keadaan dan kesan klik yang dipilih. Mengikut keperluan, komponen data-toggle boleh digayakan untuk memenuhi keperluan reka bentuk. nav-pills

Ringkasan:

Membuat bar langkah memerlukan kesan gaya yang berbeza dan kami boleh menggunakan teknologi CSS untuk mencapainya. Anda hanya perlu mentakrifkan struktur HTML dan kemudian menggunakan CSS untuk mengawal gayanya. Sama ada anda menggunakan senarai tidak tertib, susun atur fleksibel atau rangka kerja Bootstrap, membuat bar langkah adalah mudah dan berkesan. Saya berharap melalui pengenalan dalam artikel ini, anda boleh menambah elemen bar langkah yang cantik pada halaman web anda dengan mudah.

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