制作微信聊天界面 CSS
2024-05-09 15:40:18
CSS实现微信聊天界面
昨天刚想起来老师布置了一个作业，让我们仿写微信聊天界面，于是乎连夜补作业，给大家分享一下，不足之处请指教！
首先运行效果图如下：
手机边框是导入一个图，其他的布局模块都是用CSS来实现的页面效果
逻辑分析：
将盒子(手机界面)看作三个大部分
- 顶部框框，显示时间、电量、标题…
- 顶部又可以分为两块，第一块是首行的WeChat和时间，电量
- 第二块是中间的标题，和苹果的一个返回关闭按钮
- 第二行关闭按钮又可以分为两块：左边的三个点，右边的一个圆圈
- 中间聊天部分（我们可以用ul,列表来实现）
- 底部一个输入框，一个发送按钮
源码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ipad姐妹聊天室</title>
<style>*{margin: 0;padding: 0;}/* 大背景 */.bg{width: 512px;height: 765px;margin: 0 auto;background-image: url(images/手机背景2.jpg);}/* 顶部 */.top{width: 449px;height: 70px;float: left;margin-left: 43px;margin-top: 104px;background-color: #fff;}.first{font-size: 18px;}.first_xh{float: left;}.first_time{margin-left: 26%;float: left;}.first_dl{text-align: right;}.biaoti{font-weight: 2px;font-size: 24px;font-weight: normal;float: left;margin-left: 37%;margin-top: 3px;}.kuang{float: none;width: 70px;height: 30px;border-color: #666;border-style: solid ;border-width: 1px;background-color: f5f5f5;border-radius: 20px;text-align: right;margin-left: 82%;margin-top: 8px;padding-top:5px; }.dian{width: 16px;font-weight: bold;font-size: 22px;float: left;margin-left: 6%;margin-top: -10%;}.quan{width: 16px;height:16px;border-radius: 50%;border :4px solid;border-color: #666;margin-left: 50%;}.test{font-weight: bold;font-size: 30px;position: relative;top:-21px;left: -4px;}/* 对话框部分 */.lt{float: left;width: 449px;height: 524px;float: left;margin-left: 43px;background-color: #f5f5f5;}/* 昨天的聊天时间 */.lt_time01{float: left;font-size: 17px;text-align: center;width: 100px;height: 30;background-color: rgb(190, 187, 187);margin-top:-12%;margin-left: 41%;}/* 左侧对话 */li {list-style: none;}.lt_01 , .lt_03 ,.lt_05 {margin-left: 6%;margin-top: 16%;margin-bottom: 4%;}.lt_01 img,.lt_03 img,.lt_05 img{margin-top: -5%;float: left;}.lt_01 span , .lt_03 span ,.lt_05 span{width: 60px;border-radius: 30px;font-size: 22px;background-color: white;margin-left: 15px;margin-top: 0%;padding: 10px;}/* ------右侧对话------ */.lt_02 , .lt_04{text-align: right;}.lt_02 img , .lt_04 img{float: right;margin-top: -3%;margin-right:4%;}.lt_02 span , .lt_04 span{width: 60px;border-radius: 30px;font-size: 22px;background-color: #a6e860;margin-right: 14px;padding: 10px;}/* 昨天的聊天时间 */.lt_time{float: left;font-size: 17px;text-align: center;width: 100px;height: 30;background-color: rgb(190, 187, 187);margin-top:6%;margin-left: 41%;}/* 底部输入框 */.srk {float:left;width: 449px;height: 60px;margin-top: -12%;margin-left: 9%;}#sr{outline-style: none;border: 0px;width:380px;height:50px;font-size: 24px;border-radius: 25px;color:#666;}#fs{float: right;width:50px;height:50px;border-radius: 50%;outline-style: none;margin-right: 2%;}
</style>
</head>
<body><!-- 顶部栏目 --><div class="bg"><div class="top"><div class="first"><div class="first_xh">....WeChat</div><div class="first_time">21:26</div><div class="first_dl">100%</div></div><div><div class="biaoti">姐妹聊天室</div><div class="kuang"><div class="dian">...</div><div class="quan"><span class="test">.</span></div> </div></div></div><!-- 中间聊天页面 --><div class="lt"><ul><li class="lt_time01">昨天 12:38</li><li class="lt_01"><img src="data:images/6a88.png" alt="" width="60px" height="60"><span>在吗姐妹</span></li><li class="lt_02"><img src="data:images/12345.png" alt="" width="65px" height="60px"><span>
制作微信聊天界面 CSS相关推荐
- 纯HTML+CSS实战之仿微信聊天界面制作
效果图如下: 主要运用了之前实战项目中的三角形制作和before及after伪类选择器知识(其中头像图片采用30px*30px图片) 代码如下: <!DOCTYPE html> <h ...
- html+css+js+python(QtWebEngineWidgets) 实现微信聊天界面-包括时间，文件，纯文本等
文章目录 展示 参考文章 html + js + css python 代码地址 user目录下的 chat.py为主页面, 图片都在user/images/filetype下面 相关资源 展示 纯h ...
- jquery 背景特效实现_html5实现的仿网页版微信聊天界面效果源码
码农那点事儿 关注我们,一起学习进步 这是一款基于html5实现的仿网页版微信聊天界面效果源码,可实现微信网页版聊天界面效果,在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上.整 ...
- js模拟群聊天php,jquery仿微信聊天界面实例分享
本文主要为大家详细介绍了jquery仿微信聊天界面的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大 ...
- php写的微信聊天界面,浅谈 聊天界面 核心架构设计
本文以一个小例子简单的演示在微信小程序中使用环信SDK收发消息.官网demo 下载后把整个utils目录下的文件复制到咱自己工程的目录下.在WebIMConfig.js中将AppKey替换成自己应用的 ...
- python微信聊天机器人_python实战项目，使用itchat模块制作微信聊天机器人
前言 对于咱们热爱折腾的青年来说,经常会有很多好玩的新奇创意想法,可是,有时候就缺少一个接口,实现交互.比如说,咱们博客的 python实战项目,有些的确比较好玩,但是似乎只能在电脑上跑跑程序,怎么运 ...
- Swift - 自定义单元格实现微信聊天界面
1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 (3)每条消息旁边有头像,在左边表示 ...
- 高仿微信聊天界面长按弹框样式
效果图 背景 在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种UI的. 网上找了一下,没找到. Android现成的 ListPopupWindow又不能满足需求. 因此在非上班时间撸一 ...
- android 仿微信聊天界面 以及语音录制功能,Android仿微信录制语音功能
本文实例为大家分享了Android仿微信录制语音的具体代码,供大家参考,具体内容如下 前言 我把录音分成了两部分 1.UI界面,弹窗读秒 2.一个类(包含开始.停止.创建文件名功能) 第一部分 由于6 ...
最新文章
- 正则表达式用户名密码电话身份证Email使用
- docker 容器查看命令的基础使用方法一
- 关于documentFrgament 文档片段的简单理解
- Vue实现仿音乐播放器9-更多按钮实现数据匹配
- InputStream中通过mark和reset方法重复利用缓存
- 插入排序---希尔插入排序算法（Javascript版）
- Leetcode--80. 删除排序数组中的重复项Ⅱ
- 刷爆了！BAT这场AI芯片之战，你更支持谁？
- vim---C++开发环境搭建
- 卷积的物理意义是什么？
- python可以代替按键精灵吗_Python 假装自己是按键精灵
- stm32车牌识别_道路千万条，方案这一条，带你深入了解车牌号识别系统
- 《东周列国志》第三十七回 介子推守志焚绵上 太叔带怙宠入宫中
- RocketMQ产线Broker Busy问题排查经过
- 按字母排列的中国城市名称大全
- React 全家桶（react脚手架 redux react-redux react-router-dom ui库 reactHook）含 自定义hook的方法及使用
- 渗透测试-越权漏洞之垂直越权和水平越权
- 【Java】java9的of方法
- [网络收集]JS刷新页面总和！多种JS刷新页面代码!
- Python GUI 快速入门
热门文章