home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีสร้างข้อความแชทด้วย CSS

ตัวอย่างโค้ด

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> 
  body { 
    margin: 0 auto; 
    max-width: 800px; 
    padding: 0 20px; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  } 
  .message { 
    font-size: 18px; 
    font-weight:500; 
    border: 2px solid #dedede; 
    background-color: #55e4a8; 
    color:rgb(0, 0, 0); 
    border-radius: 12px; 
    padding: 10px; 
    margin: 10px 0; 
  } 
  .darker { 
    border-color: #ccc; 
    background-color: rgb(111, 25, 182); 
    color:white; 
  } 
  .message::after { 
    content: ""; 
    clear: both; 
    display: table; 
  } 
  .profilePic{ 
    width: 100%; 
  } 
  .message img { 
    float: left; 
    max-width: 60px; 
    width: 100%; 
    margin-right: 20px; 
    border-radius: 50%; 
  } 
  .message img.right { 
    float: right; 
    margin-left: 20px; 
    margin-right:0; 
  } 
  .timeStampRight { 
    float: right; 
    color: rgb(0, 0, 0); 
    font-weight: bold; 
  } 
  .timeStampLeft { 
    float: left; 
    color: rgb(255, 255, 255); 
    font-weight: bold; 
  } 
</style> </head> <body> <h1>ตัวอย่างข้อความแชท</h1> <div class="message"> <img class="profilePic" src="https://i.picsum.photos/id/295/200/200.jpg"> <p>สวัสดี วันหยุดของคุณเป็นอย่างไรบ้าง?</p> <span class="timeStampRight">9:00</span> </div> <div class="message darker"> <img class="profilePic" src="https://i.picsum.photos/id/255/200/200.jpg"> <p>เป็นอย่างดีมาก ขอบคุณที่ถาม!</p> <span class="timeStampLeft">9:05</span> </div> <div class="message"> <img class="profilePic" src="https://i.picsum.photos/id/295/200/200.jpg"> <p>คุณไปเที่ยวที่ไหนในวันหยุดไหม?</p> <span class="timeStampRight">9:07</span> </div> <div class="message darker"> <img class="profilePic" src="https://i.picsum.photos/id/255/200/200.jpg"> <p>ใช่! กำลังคิดจะไปดิสนีย์แลนด์</p> <span class="timeStampLeft">9:10</span> </div> </body> </html>

ผลลัพธ์

โค้ดจะแสดงรายการข้อความแชทพร้อมรูปโปรไฟล์ เวลา และสีพื้นหลังสลับกันระหว่างสองฝ่าย

วิธีสร้างข้อความแชทด้วย CSS