วิธีการ - ข้อความคำบรรยาย
เรียนรู้วิธีสร้างข้อความไฮไลต์ด้วย CSS
โทรออก
ข้อความเสริมมักจะวางไว้ที่ด้านล่างของหน้าเพื่อแจ้งให้ผู้ใช้ทราบเกี่ยวกับสิ่งพิเศษ: เคล็ดลับ/ลูกเล่น ส่วนลด การดำเนินการที่จำเป็น และอื่นๆ
สร้างคำบรรยาย
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<div class="callout">
<div class="callout-header">Callout
Header</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<div class="callout-container">
<p>Some text...</p>
</div>
</div>
หากคุณต้องการปิดข้อความคำบรรยาย ให้เพิ่มองค์ประกอบ <span> ที่มีonclick
แอตทริบิวต์ที่ระบุว่า "เมื่อคุณคลิกที่ฉัน ให้ซ่อนองค์ประกอบหลักของฉัน" ซึ่งเป็นคอนเทนเนอร์ <div> (class="alert")
เคล็ดลับ:ใช้เอนทิตี HTML " ×
" เพื่อสร้างตัวอักษร "x"
ขั้นตอนที่ 2) เพิ่ม CSS:
จัดรูปแบบกล่องข้อความเสริมและปุ่มปิด:
ตัวอย่าง
/* Callout box
- fixed position at the bottom of the page */
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
/* Callout header */
.callout-header {
padding: 25px
15px;
background: #555;
font-size: 30px;
color: white;
}
/* Callout container/body */
.callout-container
{
padding: 15px;
background-color:
#ccc;
color: black
}
/* Close button */
.closebtn {
position:
absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
/* Change color on
mouse-over */
.closebtn:hover {
color: lightgrey;
}
เคล็ดลับ:ตรวจสอบข้อความแจ้งเตือนด้วย
เคล็ดลับ:ตรวจสอบหมายเหตุด้วย