ย่อยที่เรียน: สร้างข้อความปล่อย

เรียนรู้ว่าจะเขียนข้อความปล่อย (Callout Message) ด้วย CSS

สร้างข้อความปล่อย

ขั้นที่ 1 - เพิ่ม HTML:

<div class="callout">
  <div class="callout-header">หัวข้อ Callout</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>ข้อความบางอย่าง...</p>
  </div>
</div>

หากคุณต้องการที่จะปิดการปิดข้อความปล่อย โปรดเพิ่ม <span> ตัวเลขฮ์，และตั้งค่าตัวเลขฮ์เพื่อ onclick ขอบเขต，ซึ่งหมายความว่า "เมื่อคุณกดผม ฉันจะซ่อนตัวตัวแม่ของฉัน" คือตัวแทน <div class="callout">。

คำเตือน:ใช้ตัวเลขฮ์ทาง HTML "&:times;"สร้างตัวอักษร "x"。

ขั้นที่ 2 - เพิ่ม CSS:

ตั้งรูปแบบสไตล์สำหรับกล่องข้อความปล่อยและปุ่มปิด:

/* กล่องข้อความปล่อย - ตั้งตัวอยู่ที่ด้านล่างของหน้า */
.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
{}
/* หัวข้อข้อความปล่อย */
.callout-header {
  padding: 25px 15px;
  background: #555;
  font-size: 30px;
  color: ขาว;
{}
/* ตัวแทนของข้อความปล่อย */
.callout-container {
  padding: 15px;
  background-color: #ccc;
  color: ดำ
{}
/* ปุ่มปิด */
.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: ขาว;
  font-size: 30px;
  cursor: pointer;
{}
/* แก้ไขสีเมื่อเห็นด้วยเมาส์ */
.closebtn:hover {
  color: ขาวอ่อน;
{}

亲自试一试

相关页面

教程：如何创建警告消息

教程：如何创建便签