ล่าสุดการพัฒนาเว็บบทเรียน
 

วิธีการ - ชิปติดต่อ

❮ก่อนหน้า ถัดไปบท❯

เรียนรู้วิธีการสร้างชิปติดต่อ

ติดต่อชิป

คน จอห์นโด
คน แชนดเลอร์บิง×

สร้างชิปติดต่อ

ขั้นตอนที่ 1) เพิ่ม HTML:

ตัวอย่าง

<div class="chip">
  <img src="img_avatar.jpg" alt="Person" width="96" height="96">
  John Doe
</div>
ขั้นตอนที่ 2) เพิ่ม CSS:

ตัวอย่าง

.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
}

.chip img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}
ลองตัวเอง»

ชิปติดต่อ Closable

เพื่อปิด / ซ่อนชิปติดต่อเพิ่มองค์ประกอบที่มีแอตทริบิวต์เหตุการณ์ onclick ที่บอกว่า "when you click you on me, hide my parent element" - ซึ่งเป็น div ภาชนะ (class="chip")

ตัวอย่าง

<div class="chip">
  <img src="img_avatar.jpg" alt="Person" width="96" height="96">
  John Doe
  <span class="closebtn" onclick="this.parentElement.style.display='none'">&times;</span>
</div>

เคล็ดลับ: ใช้ HTML กิจการ " &times; " เพื่อสร้างตัวอักษร "x"

ถัดไปรูปแบบปุ่มปิด:

ตัวอย่าง

.closebtn {
    padding-left: 10px;
    color: #888;
    font-weight: bold;
    float: right;
    font-size: 20px;
    cursor: pointer;
}

.closebtn:hover {
    color: #000;
}
ลองตัวเอง»

❮ก่อนหน้า ถัดไปบท❯