移动端聊天（类似微信）——静态页面样式

ps:其他相关功能js请查看我写的 “移动端聊天（类似微信）——” 系列博客

https://blog.youkuaiyun.com/weixin_44558497/article/details/87930338

 

静态页面样式，主要也是参考了别人写的（用的时候没注意保存链接，现在写总结找不到了，尴尬。。。），不过他给的历史消息文本域是span，发送消息的时候不能保留空格和换行，我这里改成了pre（可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体）。消息输入框的发送按钮我用了sui框架的样式，所以，按钮样式就需要你们自行调整啦~

效果图：

html代码：

<!-- 历史消息 -->
                <div class="mobile-page">
                    <div class="user-group">
                         <div class="user-msg">
                               <pre class="user-reply