[前端] 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入门练手项目, ...
最新文章
- c语言测试代码怎么写,初学C语言，写了一个测试手速的工具，代码发上来，存着。。...
- stateful openflow------整理openstate原理以及具体应用
- 为什么选择Dojo - 记Dojo中文博客正式开张
- OSCON上最受欢迎的Docker演讲
- 字符设备驱动高级篇5——静态映射表、动态映射结构体方式操作寄存器
- mysqld --initialize --console 没有 打印信息_JavaScript设计模式--装饰者模式
- 怎样用计算机算屋面的坡度,屋顶坡度要怎么算，一般是多少？
- ireport在springboot中中文不显示解决
- Android中ICS4.0Launcher中Fold的功能详解【androidICS4.0--Launcher系列三】
- 放大器的传递函数_这么酷，采用极致小巧的运算放大器设计麦克风电路！
- m115b linux 驱动下载,m115b驱动下载
- soul源码阅读（七）Spring Cloud应用示例运行续2
- 【计算机基础】计算机分类
- 廉价的美国VPS review
- 多用途通讯录短信定位获取系统(安卓Android+苹果IOS+双端)带视频教程
- Axure绘制页面框架
- PDF文件中的图片如何删除？分享两种删除方法
- html中repeat的作用,html中hover和no-repeat
- html 淡出淡入轮播图,用CSS3 transition属性实现淡入淡出轮播图
- python一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？