Bagaimana membuat: tanda

Belajar bagaimana menggunakan CSS untuk mengatur gaya tanda

Berhasil Info Peringatan Bahaya Lainnya

亲自试一试

Bagaimana mengatur gaya tanda

Langkah pertama - Tambahkan HTML：

<span class="label success">Berhasil</span>
<span class="label info">Info</span>
<span class="label warning">Peringatan</span>
<span class="label danger">Bahaya</span>
<span class="label other">Lainnya</span>

Langkah kedua - Tambahkan CSS：

.label {
  color: white;
  padding: 8px;
}
.success {background-color: #04AA6D;} /* hijau */
.info {background-color: #2196F3;} /* biru */
.warning {background-color: #ff9800;} /* kuning */
.danger {background-color: #f44336;} /* merah */
.other {background-color: #e7e7e7; color: black;} /* abu-abu */

亲自试一试