Carta langkah css

Css carta langkah

Carta langkah ialah alat grafik biasa yang menerangkan proses atau proses operasi melalui satu siri arahan langkah mudah. Rajah langkah biasanya menggunakan angka geometri yang ditandakan dengan nombor, teks atau anak panah untuk menggambarkan dengan jelas proses operasi. Dalam reka bentuk dan pembangunan web, rajah langkah sering digunakan dalam tutorial, panduan, halaman penerangan produk, dsb.

Teknologi CSS telah menjadikan reka bentuk rajah langkah lebih ringkas, lebih pantas dan lebih cantik Dengan beberapa kod CSS mudah, anda boleh mencipta rajah langkah yang jelas, cantik dan elegan.

1. Buat bingkai peta langkah

Pertama, kita perlu mencipta bingkai peta langkah, iaitu bekas yang mengandungi satu siri jubin langkah. Anda boleh membuat bingkai ini menggunakan HTML dan CSS.

<div class="steps-container">
    <div class="step">
        <span class="step-number">1</span>
        <p class="step-description">步骤1</p>
    </div>
    <div class="step">
        <span class="step-number">2</span>
        <p class="step-description">步骤2</p>
    </div>
    <div class="step">
        <span class="step-number">3</span>
        <p class="step-description">步骤3</p>
    </div>
</div>

Dalam kod di atas, kita mula-mula mencipta bekas rajah langkah (.steps-container) dan kemudian menambah tiga jubin langkah (.step) di dalamnya. Setiap jubin langkah termasuk nombor langkah (.nombor langkah) dan penerangan langkah (.penerangan langkah).

2. Reka bentuk gaya jubin langkah

Sekarang, kita perlu menambah gaya pada setiap jubin langkah. Di sini kita akan menggunakan sintaks CSS untuk menambah gaya seperti sempadan, latar belakang, bayang-bayang dan sudut bulat pada setiap jubin langkah.

.step {
    border: 2px solid #999;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
}

Dalam kod, kami menambah sempadan pepejal lebar 2 piksel pada setiap jubin langkah dan menggunakan jejari sempadan untuk menambah 6 piksel sudut bulat pada jubin. Warna latar belakang ditetapkan kepada putih dan bayang kelabu muda telah ditambahkan pada blok langkah menggunakan sifat bayang-kotak.

Untuk menjadikan nombor langkah dan perihalan langkah lebih berpusat dan cantik, kami menggunakan sifat seperti item paparan dan penjajaran untuk memusatkan jubin langkah dan menambah jumlah jarak dan pelapik yang sesuai.

3. Tambahkan gaya pada nombor langkah

Menggunakan CSS, kami boleh menambah gaya pada nombor langkah (.nombor langkah) dengan sangat mudah. Kod berikut boleh digunakan untuk menetapkan saiz, warna dan gaya fon nombor langkah:

.step-number {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #999;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
}

Kod di atas akan menambah gaya bulatan (jejari sempadan: 50%) pada nombor langkah (.step -nombor) dan tetapkan Saiznya (atribut seperti lebar dan tinggi), warna latar belakang (warna latar belakang) dan warna teks (warna). Untuk memusatkan nombor langkah, kami menggunakan sifat penjajaran teks dan ketinggian baris.

4. Tambahkan sambungan antara jubin langkah

Dengan beberapa kod CSS mudah, kami boleh mencipta anak panah, sambungan dan gaya garisan lain antara jubin langkah. Kod berikut mencipta gaya anak panah untuk jubin langkah:

.step:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 15px 0 15px;
    border-color: #999 transparent transparent transparent;
    transform: translateX(-50%);
}

Blok kod ini menambah elemen pseudo sebelum setiap jubin langkah (.step) untuk mencipta anak panah antara jubin langkah ( :sebelum). Kami menggunakan sifat kedudukan untuk menjajarkan anak panah di atas setiap jubin langkah dan menggunakan sifat -transform dan kiri untuk memusatkan anak panah secara mendatar.

Dengan mengubah suai sifat gaya dalam blok kod di atas, anda juga boleh membuat sambungan gaya lurus, putus-putus dan bulat antara jubin langkah.

Dengan teknik CSS mudah di atas, anda boleh mencipta kesan gambar rajah langkah yang cantik dan terperinci dengan cepat, meningkatkan kesan visual dan kebolehgunaan tutorial, panduan, penerangan produk dan halaman lain.

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