[前端] html入门练手——微信对话框
2024-06-09 12:50:51
html入门练手——微信对话框
- 效果图
- css部分
- html部分
- 待解决问题
刚入门html，学到了元素的动态布局，就试试看，写得很死很烦，慢慢来吧。
效果图
css部分
气泡框部分参考CSS实现微信对话框。
<style>.fake {background-color: rgb(236, 236, 236);}.phonehead {background-color: rgb(236, 236, 236);height: 5%;width: 100%;font-size: 13px;font-weight: 800;overflow: auto;padding: 5px 0;}.line1 {width: 33%;float: left;}.chathead {background-color: rgb(236, 236, 236);height: 13%;width: 100%;font-size: 18px;font-weight: 800;overflow: auto;padding: 3px 0 3px 0;}.chat {background-color: rgb(236, 236, 236);height: 577px;border-top: 1px solid rgb(214, 214, 214);border-bottom: 1px solid rgb(214, 214, 214);padding: 5px 0 0 0;}.avatar1 {padding: 0 10px;float: left;}.avatar1 img {height: 45px;border-radius: 4px;}.avatar2 {padding: 0 10px;float: left;}.avatar2 img {height: 45px;border-radius: 4px;}.dialog1 {/* 左边儿的对话框 */margin: 5px 3px;float: left;clear: both;}.dialog2 {/* 右边儿的对话框 */margin: 5px 3px;float: right;clear: both;}.word1 {/* ref: https://blog.csdn.net/weixin_30379911/article/details/99922923 */left: 3px;min-width: 20px;max-width: 240px;background: white;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;font-size: 18px;color: black;word-break: break-word;position: relative;padding: 10px 14px;float: left;}.word1::before {content: "";position: absolute;width: 0;height: 0;left: -12px;top: 15px;border: 6px solid;border-color: transparent white transparent transparent;}.word2 {right: 3px;min-width: 20px;max-width: 240px;background: rgb(150 237 107);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;font-size: 18px;color: black;word-break: break-word;position: relative;padding: 10px 14px;float: left;}.word2::before {content: "";position: absolute;width: 0;height: 0;right: -12px;top: 12px;border: 6px solid;border-color: transparent transparent transparent rgb(150 237 107);}.reply {height: 58px;background-color: rgb(245 245 245);}</style>
html部分
<body><div class="fake" style="float: left; width:400px"><!-- 造假部分 --><div class="phonehead"><!-- 手机自带头部 --><div class="line1" style="text-align: left;"><!-- 1.1信号 --><div style="height: 100%; float: left; padding: 2px ; margin: 0 2px;"><img src="img/信号.png" height="14px" /></div><!-- 1.2运营商 -->中国移动 4G</div><div class="line1" style="text-align: center;"><!-- 2.时间 -->16:04</div><div class="line1" style="text-align: right;"><!-- 3.电量 --><divstyle="height: 100%; float: right; padding: 2px 0; margin: 0 2px;"><img src="img/电量.png" height="14px" /></div></div></div><div class="chathead"><!-- 对话框头部 --><div class="line1" style="text-align: left;"><divstyle="height: 100%; float: left; padding: 2px ; margin: 0 15px;"><img src="img/arrow.png" height="21px" /></div></div><div class="line1" style="text-align: center;">A同学</div><divclass="line1"style="text-align: right; margin-right:4px; width:30%;">···</div></div><div class="chat"><!-- 对话内容 --><div class="dialog1"><div class="avatar1"><img src="img/a.jpg" /></div><div class="word1">啊啊啊啊啊啊啊啊</div></div><div class="dialog2"><div class="word2">啦啦啦啦啦啦</div><div class="avatar2"><img src="img/B.jpg" /></div></div><div class="dialog1"><div class="avatar1"><img src="img/a.jpg" /></div><div class="word1">嘻嘻嘻嘻嘻嘻嘻嘻</div></div><div class="dialog2"><div class="word2">略略略略略</div><div class="avatar2"><img src="img/B.jpg" /></div></div><div class="dialog2"><div class="word2">呼呼呼呼呼呼</div><div class="avatar2"><img src="img/B.jpg" /></div></div></div><div class="reply"><!-- 回复内容 --><div><img src="img/reply.png" width="400px" /></div></div></div></body>
待解决问题
- 信号图标、闹钟、电量以及回复都是盗用截图里的，需要找素材
- 语音、小程序、图片、视频
- 等等等等
[前端] html入门练手——微信对话框相关推荐
- 微信小程序初体验，入门练手项目--通讯录，后台是阿里云服务器（一）
内容: 一.前言 二.相关概念 三.开始工作 四.启动项目起来 五.项目结构 六.设计理念 七.路由 八.部署线上后端服务 同步交流学习社区: https://www.mwcxs.top/page/4 ...
- Android Studio 插件开发详解一：入门练手
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78112003 本文出自[赵彦军的博客] 系列目录 Android Gradle使用 ...
- 一个适合于Python 初学者的入门练手项目
随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...
- python新手项目-推荐：一个适合于Python新手的入门练手项目
原标题:推荐:一个适合于Python新手的入门练手项目 随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人 ...
- python新手小项目-推荐：一个适合于Python新手的入门练手项目
随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...
- python新手程序_推荐：一个适合于Python新手的入门练手项目
随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...
- python新手入门项目推荐_推荐：一个适合于Python新手的入门练手项目
随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...
- 适合新手入门的8个python项目_推荐：一个适合于Python新手的入门练手项目
随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...
- 一个适合于Python初学者的入门练手项目
随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...
最新文章
- faster rcnn结构
- python判断对象是否有属性
- 网站SEO优化中几个不为人知的小细节分享！
- k8s边缘节点_边缘计算，如何啃下集群管理这块硬骨头?
- UI设计素材 | 多用途APP项目管理移动应用UI套件
- node.js中实现同步操作的3种实现方法
- 使用hiredis接口（Synchronous API）编写redis客户端
- MySQL error(1449) The user specified as a definer ('usertest'@'%') does not exist
- Atitit Mysql查询优化器 存取类型 范围存取类型 索引存取类型 AND or的分析
- android调用本地js文件上传,原生JS实现前端本地文件上传
- graphpad 安装 hello world
- SqlSugar-执行Sql语句查询实例
- word怎么根据点画曲线_word2010如何画直线,曲线,肘形连接符,曲线连接符,等多种直线和曲线类型...
- 美国通胀率“破9”创40年新高 加密步履蹒跚？全球屏住呼吸等待美国下一步动作
- DC游戏《斑鸠》原创赏析[转载]
- Cannot find current proxy: Set ‘exposeProxy‘ property on Advised to ‘true‘ to make it available,and.
- 李白 宣州谢朓楼饯别校书叔云
- linux执行scp命令出错
- 【商业数据分析】—— 用户价值RFM模型详解（小仙女搬运工）
- 关于knife4j工具聚合api文档的使用