Rumah > Artikel > hujung hadapan web > Cara menggunakan CSS untuk melaksanakan carta alir
Carta alir merujuk kepada proses yang memaparkan proses melalui grafik dan anak panah Ia boleh menyatakan setiap pautan proses dengan lebih intuitif dan sangat praktikal. Dalam pembangunan web moden, kita selalunya perlu menggunakan pelbagai gaya untuk mencantikkan carta alir, jadi artikel ini akan memperkenalkan beberapa gaya CSS asas dan cara menggunakan CSS untuk melaksanakan carta alir.
Pertama, mari lihat carta alir yang ringkas~
Carta alir dalam gambar terdiri daripada 3 langkah: mula, proses dan tamat. Kami boleh menggunakan CSS untuk menggayakan langkah-langkah ini untuk menjadikan maklumat lebih mudah untuk difahami oleh orang ramai.
Seterusnya, kita perlu menentukan beberapa gaya CSS untuk mencantikkan carta aliran kita.
1. Gaya asas
Kami boleh menetapkan warna latar belakang, jidar dan saiz fon yang sama untuk setiap langkah:
.step { background-color: #fff; border: 1px solid #333; font-size: 14px; padding: 10px; text-align: center; }
Dalam kod di atas, kami menggunakan background-color
untuk menetapkan warna latar belakang, border
untuk menetapkan jidar, font-size
untuk menetapkan saiz fon, padding
untuk menetapkan jarak antara teks dan sempadan, dan gunakan text-align
untuk menetapkan teks supaya ditengahkan .
Gaya asas ini boleh digunakan untuk menyatukan semua langkah di seluruh rajah.
2. Gaya titik permulaan dan titik penamat
Untuk titik permulaan dan titik penamat, kami boleh menggunakan gaya khas untuk membuat perbezaan untuk membantu pembaca memahami, contohnya:
.start { background-color: #0f0; } .end { background-color: #f00; }
Dalam gaya di atas, kami menggunakan background-color
untuk menetapkan warna latar belakang dan menggunakan latar belakang warna yang berbeza untuk membezakan titik permulaan dan penamat.
3. Gaya anak panah
Dalam carta alir, anak panah ialah kunci untuk menyambung langkah Kami juga boleh menggunakan gaya untuk anak panah:
.arrow { border-top: 1px solid #ccc; height: 20px; position: relative; margin-top: -20px; } .arrow::before { border-left: 1px solid #ccc; border-top: 1px solid #ccc; content: ""; height: 10px; left: -7px; position: absolute; top: 10px; transform: rotate(-45deg); width: 10px; }
Dalam kod di atas. , kami Dua gaya utama digunakan: .arrow
dan .arrow::before
. Gaya
.arrow
digunakan untuk menetapkan gaya asas anak panah, termasuk: menggunakan border-top
untuk menetapkan warna dan ketebalan anak panah dan menentukan ketinggian anak panah, menggunakan position
atribut untuk meletakkan anak panah, dan tetapkan margin -atas ialah nombor negatif supaya anak panah dan teks tidak bertindih. Gaya .arrow::before
digunakan untuk menetapkan bentuk anak panah, termasuk: menggunakan border-left
dan border-top
untuk menentukan warna dan ketebalan sisi kiri dan atas masing-masing, dan menggunakan atribut content
pada rentetan kosong untuk memaparkannya sebagai kotak Gunakan atribut position
untuk meletakkan anak panah, ambil nilai teratas untuk menetapkan kedudukan anak panah dan gunakan atribut transform
untuk memutarkannya kepada 45 darjah.
Dengan gaya CSS asas di atas, kami kemudiannya boleh melaksanakan carta aliran lengkap melalui HTML dan CSS.
<div class="flowchart"> <div class="step start">开始</div> <div class="arrow"></div> <div class="step">流程1</div> <div class="arrow"></div> <div class="step">流程2</div> <div class="arrow"></div> <div class="step">流程3</div> <div class="arrow"></div> <div class="step end">结束</div> </div>
Dalam kod HTML di atas, kami menggunakan teg div
untuk mentakrifkan teks setiap langkah dalam carta alir dan gaya .arrow
untuk menentukan anak panah. Dalam pelaksanaan, anda perlu menggunakan margin-top
untuk melaraskan kedudukan anak panah, dan mengalih keluar gaya .arrow
dalam langkah terakhir, jika tidak, akan ada anak panah kosong. Gunakan permulaan dan akhir untuk menunjukkan titik permulaan dan titik akhir masing-masing.
Sudah tentu, sebagai tambahan kepada gaya CSS asas yang dinyatakan di atas, kami juga boleh menentukan gaya yang lebih maju mengikut keperluan, seperti menambah kesan animasi untuk menjadikan halaman lebih jelas. Semasa membangunkan carta alir, ingatlah untuk memberi perhatian kepada kejelasan dan kebolehbacaan untuk memastikan bahawa maklumat disampaikan dengan jelas kepada pengguna untuk kegunaan optimum.
Atas ialah kandungan terperinci Cara menggunakan CSS untuk melaksanakan carta alir. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!