上周到湖南长沙待了一周，在行走的过程中，发现目前最重要就是你的码一定要是绿码，如果是黄码，哪里都去不了，为啥说这个事情呢，因为我自己有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>很好笑的，一个女孩在婚前如何区分内向和外向的软件开发人员？性格外向的开发人员在与您交谈时会看着您的鞋子。那么，内向的人是怎么做的呢？他们不能和女人说话。												


											

【每日一练】30—用 HTML + CSS 实现仿WhatsApp 的聊天界面效果相关推荐
	

    
								
  1. 【每日一练】103—纯CSS实现的一款炫酷卡片效果
		
    作者 | 杨小爱 写在前面 我们经常会在各大平台看到很多产品的卡片效果,以及一些个人单页网站上的个人资料介绍时,也会用到各种卡片效果来展示信息,这种卡片式的设计,可以帮助我们分门别类的归类各种信息,让 ...
    
		
    2. 
						
  2. 【每日一练】109—一款炫酷按钮的鼠标悬停效果
		
    文 | 杨小爱 写在前面 按钮,几乎是任何一个项目都会用到的一个组件,因此,今天,我们来练习一个好玩的鼠标效果,具体效果,请看下面的GIF截图: 我们看完了最终效果,现在,我们一起来看一下它的源码.  ...
    
		
    3. 
						
  3. 【每日一练】121—Tailwind CSS实现一套个人单页网站模板效果
		
    作者 | 杨小爱 写在前面 今天是2023年的第三天,终于把2022送走了,也把2022的码和阳送走了,真的未来一切可期. 在2022年的最后几天,我们家全部阳了一遍,因此,也断更了一周时间,目前均在 ...
    
		
    4. 
						
  4. HTML+CSS入门级仿知乎登录界面
		
    <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>知 ...
    
		
    5. 
						
  5. 【每日一练】100—一个渐变色计数器列表的实现
		
    文 | 杨小爱 写在前面 今天我们迎来了[每日一练]栏目的第100个练习,在这几个月的持续练习中,我不知道,你学到了什么?是持续学习的习惯,还是前端基础知识? 但是,不管怎么样,只要持续的去做去学习自 ...
    
		
    6. 
						
  6. 制作微信聊天界面 CSS
		
    CSS实现微信聊天界面 ​ 昨天刚想起来老师布置了一个作业,让我们仿写微信聊天界面,于是乎连夜补作业,给大家分享一下,不足之处请指教! 首先运行效果图如下: 手机边框是导入一个图,其他的布局模块都是用 ...
    
		
    7. 
						
  7. 【每日一练】68—CSS实现一组渐变按钮动画效果
		
    在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...
    
		
    8. 
						
  8. 【每日一练】56—CSS实现一款实用的响应式卡片悬停效果
		
    写在前面 今天这个练习,是目前很多网站上非常常见的一个效果,主要是这个效果干净简洁,它没有任何多余的内容,看起来也很舒服. 具体效果,请看下面的gif动画: 因为是GIF录屏,背景的渐变色有点色块,衔 ...
    
		
    9. 
						
  9. 【每日一练】19—CSS 实现撕纸的效果
		
    写在前面 今天我们来练习一个CSS实现的撕纸效果,这个效果,也会在一些设计网站上经常看到,但是这个用PS可以直接做成一张图片,但是,今天我们用CSS通过两张图片就实现了,这样做的好处,就是当我们替换图 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. GitHub分享《深度学习500问》优质资源
		
    2. 
						
  2. 字典树（前缀树）-Java实现
		
    3. 
						
  3. [C++] NEW Advanced Usage
		
    4. 
						
  4. 初学 Ajax（涉及 php)
		
    5. 
						
  5. 51nod 1278 相离的圆
		
    6. 
						
  6. redis哨兵主从不切换_《「面试突击」—Redis篇》-- Redis的主从复制？哨兵机制？...
		
    7. 
						
  7. linux容器安卓下载,Docker 1.7.0 发布下载，Linux 容器引擎
		
    8. 
						
  8. 如何理解 Python 中的面向对象编程？
		
    9. 
						
  9. import xxx from 和 import {xxx} from的区别
		
    10. 
						
  10. 2021 年全国大学生数据统计与分析竞赛
		
    11. 
						
  11. 05-基础widgets
		
    12. 
						
  12. Ubuntu16.04镜像下载
		
    13. 
						
  13. 高等数学（第七版）同济大学 习题2-1 个人解答
		
    14. 
						
  14. 2020蓝桥杯省赛模拟赛
		
    15. 
						
  15. Windows Server 2019/2022域控制器网络位置变为“专用网络”或“公共网络”
		
    16. 
						
  16. 【转】图像视觉开源代码
		
    17. 
						
  17. 免费获取全球生物量密度1km网格tif数据（GEDI L4B Gridded Aboveground Biomass Density, Version 2）
		
    18. 
						
  18. Python爬虫学习（六）selenium自动化测试登陆百度账号_滑动验证码问题
		
    19. 
						
  19. 反编译插件jad和jd-jui
		
    20. 
						
  20. 如何在 Python 中将 Excel 文件转换为图像？Aspose快速搞定
		
    21. 
		

	


热门文章
	

    
									
  1. CListCtrl用法简介(转)
			
    2. 
						
  2. python evaluate函数_Python:__eq__和__str__函数的使用示例
			
    3. 
						
  3. 前端可视化——SVG矢量图技术
			
    4. 
						
  4. watir sites
			
    5. 
						
  5. 企业服务架构演进-走上造轮子之路
			
    6. 
						
  6. c语言如何实现面向对象编程
			
    7. 
						
  7. 愉快的学习就从翻译开始吧_traces_A Python library for unevenly-spaced time series analysis.
			
    8. 
						
  8. 全球首起机器人杀人案进展；Roomba扫地机器人开始加入Alexa语音助手│IoT黑板报...
			
    9. 
						
  9. 学习 MongoDB 一篇文章就够了（珍藏版）
			
    10. 
						
  10. java从指定文件中删除字符串,java删除指定目录中的文件或文件夹
			
    11.