如何创建:聊天消息
- Vorige pagina Page soon to be launched
- Volgende pagina Pop-up chat venster
了解如何使用 CSS 创建聊天消息。
聊天消息

你好。你今天怎么样?
11:00
嘿!我很好。谢谢关心!
11:01
太好了!那么,你今天想做什么?
11:02
不知道。踢足球...或者也许学更多编程?
11:05如何创建聊天消息
第一步 - 添加 HTML:
<div class="container"> <img src="/w3images/bandmember.jpg" alt="Avatar"> <p>Hello. How are you today?</p> <span class="time-right">11:00</span> </div> <div class="container darker"> <img src="/w3images/avatar_g2.jpg" alt="Avatar" class="right"> <p>Hey! I'm fine. Thanks for asking!</p> <span class="time-left">11:01</span> </div> <div class="container"> <img src="/w3images/bandmember.jpg" alt="Avatar"> <p>Lekker! Dus, wat wil je vandaag doen?</p> <span class="time-right">11:02</span> </div> <div class="container darker"> <img src="/w3images/avatar_g2.jpg" alt="Avatar" class="right"> <p>Nee, ik weet het niet. Voetbal spelen.. of misschien meer code leren?</p> <span class="time-left">11:05</span> </div>
Tweede stap - Voeg CSS toe:
/* Chatcontainer */ .container { border: 2px solid #dedede; background-color: #f1f1f1; border-radius: 5px; padding: 10px; margin: 10px 0; } /* Donkere chatcontainer */ .darker { border-color: #ccc; background-color: #ddd; } /* Verwijder de float */ .container::after { content: ""; clear: both; display: table; } /* Stel het stijl van de afbeelding in */ .container img { float: links; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%; } /* Stel het stijl van de rechter afbeelding in */ .container img.right { float: right; margin-left: 20px; margin-right:0; } /* Stel het stijl van de rechterzijde tijdstekst in */ .time-right { float: right; color: #aaa; } /* Stel het stijl van de linksonder tijdstekst in */ .time-left { float: links; kleur: #999; }
- Vorige pagina Page soon to be launched
- Volgende pagina Pop-up chat venster