上周到湖南长沙待了一周，在行走的过程中，发现目前最重要就是你的码一定要是绿码，如果是黄码，哪里都去不了，为啥说这个事情呢，因为我自己有2台手机，一台安卓小米，一台苹果，发现我到了长沙以后，核酸还是72小时内的，小米机就直接变黄码了。然后，我赶紧打开苹果手机看一下，真心感谢，还是绿码。
在这个过程中我就很好奇，一个人居然可以同时又黄又绿，我也真是服了，这个两个账户都是我自己实名制认证过。
接着，我就赶紧到居住的附近医院做了一个核酸，发现过了两天，小米机居然还是黄码，但是苹果手机，会直接显示核酸报告时间，码也一直是绿色的。
为什么会出现这样的情况？欢迎大家从技术角度交流一下，这样的bug怎么解决？
接下来，我们今天继续【每日一练】的内容，今天我们练习的内容是一个使用HTML+CSS实现仿WhatsAPP的聊天界面，这个软件有移动端和PC端，如果不了解这个软件的话，也没有关系，其实，它就相当于我们的微信。
现在，我们一起来看一下，我们今天练习的最终效果：
HTML代码：
<!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>CSS代码：
*
{
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;
}写在最后
以上就是我们【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号
3449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
