ຮຽນຮູ້ວິທີສ້າງໜ້າເວັບເພຈແບບນີ້ດ້ວຍ HTML & CSS

ຂັ້ນຕອນທີ່ 1 ເພີ່ມໂຄ້ດ HTML ດ້ານລູ່ມນີ້ໃສ່ໃນໄຟລ໌ HTML

    <div class="badge">
        1
    </div>

ຂັ້ນຕອນທີ່ 2 ເພີ່ມໂຄ້ດ CSS ດ້ານລູ່ມນີ້ໃສ່ໃນໄຟລ໌ CSS:

.badge {   

/* ຈັດເນື້ອຫາໃຫ້ຢູ່ເຄິງກາງ */   

align-items: center;   

display: flex;   

justify-content: center;
    /* ສີ */   

background-color: rgba(0, 0, 0, 0.3);   

color: #fff;
    /* ປັບໃຫ້ຂອບເປັນມຸມໂຄ້ງ */   

border-radius: 9999px;   

height: 32px;   

width: 32px;}

ແລະ ​ທັງ​ໝົດ​ນີ້​ຄື​ ການສ້າງ Badge ທີ່​ເຮົາ​ນຳ​ມາ​ຝາກ​ເພື່ອນ​ໆ​ ລອງ​ໄປ​ປັບ​ໃຊ້​ກັບ​ໂປຣ​ເຈັກ​​ກັນ​ເບິ່ງ​ນະ​ ແລະ​ ຖ້າຫາກ​ບົດ​ຄວາມ​ນີ້​ຜິດ​ພາດ​ປະການ​ໃດ​ ກໍ​ຂໍ​ອ​ະໄພ​ມາ​ນະ​ ທີ່​ນີ້​ດ້ວຍ​.