ఎలా సృష్టించాలి: చాట్ సందేశాలు
CSS ద్వారా చాట్ సందేశాలను ఎలా ఉపయోగించాలి తెలుసుకోండి.
చాట్ సందేశాలు

హలో. ఈ రోజు నీకు ఎలా ఉంది?
11:00
హే! నేను బాగా ఉన్నాను. సహాయం కోసం ధన్యవాదాలు!
11:01
అద్భుతం! అప్పుడు, ఈ రోజు నీకు ఏం చేయాలి?
11:02
తెలియదు. ఫుట్బాల్ ఆడండి... లేదా బహుశా మరిన్ని ప్రోగ్రామింగ్ నేర్చుకోండి?
11:05చాట్ సందేశాలను ఎలా సృష్టించాలి
మొదటి చర్య - హెచ్ఎంఎల్ జోడించండి:
<div class="container"> <img src="/w3images/bandmember.jpg" alt="Avatar"> <p>హలో. ఈ రోజు నీకు ఎలా ఉంది?</p> <span class="time-right">11:00</span> </div> <div class="container darker"> <img src="/w3images/avatar_g2.jpg" alt="Avatar" class="right"> <p>హే! నేను బాగా ఉన్నాను. అడిగినందుకు ధన్యవాదాలు!</p> <span class="time-left">11:01</span> </div> <div class="container"> <img src="/w3images/bandmember.jpg" alt="Avatar"> <p>Sweet! So, what do you wanna do today?</p> <span class="time-right">11:02</span> </div> <div class="container darker"> <img src="/w3images/avatar_g2.jpg" alt="Avatar" class="right"> <p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p> <span class="time-left">11:05</span> </div>
第二步 - 添加 CSS:
/* 聊天容器 */ .container { border: 2px solid #dedede; background-color: #f1f1f1; border-radius: 5px; padding: 10px; margin: 10px 0; } /* 较暗的聊天容器 */ .darker { border-color: #ccc; background-color: #ddd; } /* 清除浮动 */ .container::after { content: ""; clear: both; display: table; } /* 设置图像的样式 */ .container img { float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%; } /* 设置右侧图像的样式 */ .container img.right { float: right; margin-left: 20px; margin-right:0; } /* 设置右侧时间文本的样式 */ .time-right { float: right; color: #aaa; } /* 设置左侧时间文本的样式 */ .time-left { float: left; color: #999; }