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!