其他
【每日一练】30—用 HTML + CSS 实现仿WhatsApp 的聊天界面效果
上周到湖南长沙待了一周，在行走的过程中，发现目前最重要就是你的码一定要是绿码，如果是黄码，哪里都去不了，为啥说这个事情呢，因为我自己有2台手机，一台安卓小米，一台苹果，发现我到了长沙以后，核酸还是72小时内的，小米机就直接变黄码了。然后，我赶紧打开苹果手机看一下，真心感谢，还是绿码。
在这个过程中我就很好奇，一个人居然可以同时又黄又绿，我也真是服了，这个两个账户都是我自己实名制认证过。
接着，我就赶紧到居住的附近医院做了一个核酸，发现过了两天，小米机居然还是黄码，但是苹果手机，会直接显示核酸报告时间，码也一直是绿色的。
为什么会出现这样的情况？欢迎大家从技术角度交流一下，这样的bug怎么解决？
接下来，我们今天继续【每日一练】的内容，今天我们练习的内容是一个使用HTML+CSS实现仿WhatsAPP的聊天界面，这个软件有移动端和PC端，如果不了解这个软件的话，也没有关系，其实，它就相当于我们的微信。
现在，我们一起来看一下，我们今天练习的最终效果：
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【每日一练】30—用 HTML + CSS 实现仿WhatsApp 的聊天界面效果</title><link rel="stylesheet" type="text/css" href="style.css"></head><body> <div class="container"> <div class="leftSide"> <div class="header"> <div class="userimg"> <img src="user.jpg" class="cover"> </div> <ul class="nav_icons"> <li><ion-icon name="scan-circle-outline"></ion-icon></li> <li><ion-icon name="chatbox"></ion-icon></li> <li><ion-icon name="ellipsis-vertical"></ion-icon></li> </ul> </div> <div class="search_chat"> <div> <input type="text" placeholder="寻找你想联系的人聊天"> <ion-icon name="search-outline"></ion-icon> </div> </div> <div class="chatlist"> <div class="block active"> <div class="imgbx"> <img src="img1.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>张三</h4> <p class="time">10:56</p> </div> <div class="message_p"> <p>还有，一个丈夫刚刚和他的程序员妻子分手了。为什么？</p> </div> </div> </div> <div class="block unread"> <div class="imgbx"> <img src="img2.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>李四</h4> <p class="time">09:25</p> </div> <div class="message_p"> <p>最近，项目很紧张，总是改bug，还要加班。</p> <b>1</b> </div> </div> </div> <div class="block unread"> <div class="imgbx"> <img src="img3.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>有你真好</h4> <p class="time">昨天</p> </div> <div class="message_p"> <p>我又加班了</p> <b>2</b> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img4.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>赵六</h4> <p class="time">昨天</p> </div> <div class="message_p"> <p>你好</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img5.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>努力奋斗</h4> <p class="time">昨天</p> </div> <div class="message_p"> <p>html和CSS难学吗？</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img6.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>岁月静好</h4> <p class="time">2022/07/16</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img7.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>遇见美丽</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img8.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>李六</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img9.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>微笑</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img2.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>李四</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img3.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>有你真好</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img4.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>赵六</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img5.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>努力奋斗</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img6.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>岁月静好</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img7.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>遇见美丽</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img8.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>李六</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> <div class="block"> <div class="imgbx"> <img src="img9.jpg" class="cover"> </div> <div class="details"> <div class="listHead"> <h4>微笑</h4> <p class="time">2022/07/15</p> </div> <div class="message_p"> <p>很高兴跟你聊天</p> </div> </div> </div> </div> </div> <div class="rightSide"> <div class="header"> <div class="imgText"> <div class="userimg"> <img src="img1.jpg" class="cover"> </div> <h4>张三<br><span>在线</span></h4> </div> <ul class="nav_icons"> <li><ion-icon name="search-outline"></ion-icon></li> <li><ion-icon name="ellipsis-vertical"></ion-icon></li> </ul> </div>
<div class="chatBox"> <div class="message my_message"> <p>最近，我看了一些幽默笑话。<br><span>12:15</span></p> </div> <div class="message frnd_message"> <p>嗯，然后呢？<br><span>12:16</span></p> </div> <div class="message my_message"> <p>你想听吗？我可以给你讲一讲<br><span>12:17</span></p> </div> <div class="message frnd_message"> <p>好笑吗？<br><span>12:18</span></p> </div> <div class="message my_message"> <p>很好笑的，一个女孩在婚前如何区分内向和外向的软件开发人员？性格外向的开发人员在与您交谈时会看着您的鞋子。那么，内向的人是怎么做的呢？他们不能和女人说话。😄<br><span>12:19</span></p> </div> <div class="message frnd_message"> <p>哈哈哈哈哈哈<br><span>12:20</span></p> </div> <div class="message my_message"> <p>妻子总是喜欢给他们的程序员丈夫制造问题！为什么？因为程序员喜欢解决问题！<br><span>12:21</span></p> </div> <div class="message frnd_message"> <p>😄😄😄😄😄😄<br><span>12:22</span></p> </div> <div class="message my_message"> <p>后面还有<br><span>12:23</span></p> </div> <div class="message frnd_message"> <p>那你继续<br><span>12:24</span></p> </div> <div class="message my_message"> <p>结婚前，一个程序员对女朋友说自己有10套房子。可是娶了他之后，老婆发现他有两套房子，不是十套房子！当她问他这件事时，他回答说他已经用二进制告诉她了！😄<br><span>12:25</span></p> </div> <div class="message frnd_message"> <p>😄😄😄😄😄😄<br><span>12:26</span></p> </div> <div class="message my_message"> <p>还有，一个丈夫刚刚和他的程序员妻子分手了。为什么？因为他总是告诫她不要吸毒和酗酒。但她从不听，她失控了，你知道她为什么不听吗？ 因为程序员不关心警告！他们只关心错误！😄😄😄<br><span>12:27</span></p> </div> <div class="message frnd_message"> <p>😄😄😄😄😄😄<br><span>12:28</span></p> </div> </div> <div class="chatBox_input"> <ion-icon name="happy-outline"></ion-icon> <ion-icon name="attach-outline"></ion-icon> <input type="text" placeholder="输入聊天内容"> <ion-icon name="mic"></ion-icon> </div> </div> </div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script></body></html>
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif;}body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(#009688 0%,#009688 130px,#d9dbd5 130px,#d9dbd5 100%);}.container{ position: relative; width: 1396px; max-width: 100%; height: calc(100vh - 40px); background: #fff; display: flex; box-shadow: 0 1px 1px 0 rgba(0,0,0,.06),0 2px 5px 0 rgba(0,0,0,0.2);}/* 0.06 */
.container .leftSide{ position: relative; flex: 30%; background: #fff; border-right: 1px solid rgba(0,0,0,0.2); overflow: hidden;}.container .rightSide{ position: relative; flex: 70%; background: #e5ddd5;}.container .rightSide::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(pattern.png); opacity: 0.06;}.header{ position: relative; width: 100%; height: 60px; background: #ededed; display: flex; justify-content: space-between; align-items: center; padding: 0 15px;}.userimg{ position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; cursor: pointer;}.cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}.nav_icons{ display: flex;}.nav_icons li { display: flex; list-style: none; cursor: pointer; color: #51585c; font-size: 1.5em; margin-left: 22px;}.search_chat{ position: relative; width: 100%; height: 50px; background: #f6f6f6; padding: 0 15px; display: flex; justify-content: center; align-items: center;}.search_chat div { width: 100%;}.search_chat input { width: 100%; outline: none; background: #fff; border: none; padding: 6px; height: 38px; padding-left: 40px; border-radius: 30px; font-size: 14px;}.search_chat input::placeholder { color: #888;}.search_chat ion-icon{ position: absolute; left: 30px; top: 14px; font-size: 1.2em;}.chatlist{ position: relative; height: calc(100% - 110px); overflow-y: auto;}.chatlist .block { position: relative; display: flex; align-items: center; width: 100%; padding: 10px 0; padding: 15px 15px; display: flex; border-bottom: 1px solid rgba(0,0,0,.06); cursor: pointer;}.chatlist .block.active { background: #ebebeb;}.chatlist .block:hover{ background: #f5f5f5}.chatlist .block .imgbx{ position: relative; min-width: 45px; height: 45px; overflow: hidden; border-radius: 50%; margin-right: 10px;}.chatlist .block .details{ position: relative; width: 100%;}.chatlist .block .details .listHead{ display: flex; justify-content: space-between; margin-bottom: 5px;}.chatlist .block .details .listHead h4 { font-size: 1.1em; font-weight: 600; color: #111;}.chatlist .block .details .listHead .time{ font-size: 0.75em; color: #555;}.message_p{ display: flex; justify-content: space-between; align-items: center;}.chatlist .block .details p { color: #555; display: -webkit-box; -webkit-line-clamp: 1; font-size: 0.9em; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}.chatlist .block.active .details .listHead .time,.chatlist .block.active .details p { color: #111;}
.chatlist .block.unread .details .listHead .time{ color: #06d755;}.chatlist .block.unread .details p { color: #111; font-weight: 600;}.message_p b{ background: #06d755; color: #fff; min-width: 20px; height: 20px; border-radius: 50%; display: flex; font-size: 0.75em; justify-content: center; align-items: center;}.imgText{ position: relative; display: flex; justify-content: center; align-items: center;}.imgText h4{ font-weight: 600; font-size: 1.02em; margin-left: 15px; line-height: 1.2em;}.imgText h4 span { font-size: 0.8em; color: #555; font-weight: 400;}
.chatBox{ position: relative; width: 100%; height: calc(100% - 120px); padding: 50px; overflow: auto;}.message{ position: relative; display: flex; width: 100%; margin: 5px 0;}.message p { position: relative; right: 0; text-align: right; max-width: 65%; padding: 12px; border-radius: 10px; text-align: right; font-size: 0.9em; background: #dcf8c6;}.message p:first-child:before{ content: ''; position: absolute; top: 0; right: -12px; width: 24px; height: 24px; background: linear-gradient(135deg,#dcf8c6 0%,#dcf8c6 50%,transparent 50%,transparent 100%);}.message p span { display: block; margin-top: 5px; font-size: 0.85em; opacity: 0.5;}
.message.my_message{ justify-content: flex-end;}
.message.frnd_message{ justify-content: flex-start;}.message.frnd_message p { text-align: left; background: #fff;}.message.frnd_message p:first-child:before{ content: ''; position: absolute; top: 0; left: -12px; width: 24px; height: 24px; background: linear-gradient(225deg,#fff 0%,#fff 50%,transparent 50%,transparent 100%);}
.chatBox_input{ position: relative; padding: 15px; width: 100%; height: 60px; background: #f0f0f0; display: flex; justify-content: space-between; align-items: center;}.chatBox_input ion-icon{ cursor: pointer; font-size: 1.8em; color: #51585c;}.chatBox_input ion-icon:first-child{ margin-right: 15px;}.chatBox_input input{ position: relative; width: 90%; margin: 0 20px; padding: 10px 20px; border: none; outline: none; border-radius: 30px; font-size: 1em;}
/* scrollbar */
::-webkit-scrollbar { width: 5px;}
/* Track */::-webkit-scrollbar-track { background: transparent; } /* Handle */::-webkit-scrollbar-thumb { background: #bbb; }
写在最后
以上就是我们【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号