flex布局聊天界面

最新推荐文章于 2024-05-09 19:32:51 发布
最新推荐文章于 2024-05-09 19:32:51 发布
阅读量1.2k 收藏 2
点赞数 
原文地址：https://www.cnblogs.com/diligenceday/p/5985903.html

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body,.box{
            height:100%;
        }
        .box{
            display:-webkit-flex;
            display:flex;
            flex-direction:column;
            font-family:"microsoft yahei";
            font-size:18px;
        }
        .box .header{
            height:40px;
            line-height:40px;
            text-align:center;
            background:#3498DB;
            color:#fff;
        }
        .box .body{
            display: block;
            border-bottom:1px solid #eee;
            overflow:auto;
            flex:1;
        }
        .box .send-left {
            align-self:flex-end;
            margin-top:10px;
            position:relative;
            height:35px;
            background:#F8C301;
            border-radius:5px; /* 圆角 */
            line-height:35px;
            margin-left:10px;
            padding:0 10px;
            float:left;
        }
        .box .send-left .arrow {
            position:absolute;
            top:5px;
            left:-15px;
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:#fff #F8C301 #fff #fff;
        }
        .box .send {
            align-self:flex-end;
            margin-top:10px;
            position:relative;
            height:35px;
            background:#2ECC71;
            border-radius:5px; /* 圆角 */
            line-height:35px;
            margin-right:10px;
            padding:0 10px;
            float:right;
        }
        .box .send .arrow {
            position:absolute;
            top:5px;
            right:-15px;
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:#fff #fff #fff #2ECC71;
        }
        .box  .clear{
            clear:both;
        }
        .box .footer{
            height:40px;
            line-height:40px;
            display:-webkit-flex;
            display:flex;
        }
        .box .footer input{
            flex:auto;
            border:none;
            border-right:1px solid #eee;
            font-size:18px;
            padding-left:4px;
        }
        .box .footer button{
            width:50px;
            font-size:18px;
        }
    </style>
</head>
<body>
    <!--
    容器属性
        flex-direction
        flex-wrap
        flex-flow
        justify-content
        align-items
        align-content
    项目属性：
        order
        flex-grow
        flex-shrink
        flex-basis
        flex
        align-self
    -->
    <div class="box">
        <div class="header">
            消息
        </div>
        <div class="body">
            <div class="send-left">
                hehe我哟我去
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                hehe
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                hehe我哟我去
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
        </div>
        <div class="footer">
            <input type="text">
            <button>发送</button>
        </div>
    </div>    
</body>
<script>
    
</script>
</html>
赵又又i
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿微信聊天布局
07-29
微信作为中国最流行的即时通讯应用，其聊天界面的布局深受用户喜爱，因此许多开发者会尝试复刻这一布局来提供类似的交互体验。下面，我们将深入探讨如何实现这样一个高度自适应的聊天布局。 首先，我们需要理解微信...
html写出直播间页面,html5-直播
weixin_30114439的博客
05-30 710
一直喜欢看斗鱼上面dota2比赛,突然有一天对直播很感兴趣,所以了解一下.流程pc端采集=> H264压缩 => 推流 => CDN => 播放协议HLS协议video <=> M3U8 => segment-1.tsM3U8是一个包含很多ts文件地址列表的文本文件,有2种类型全量列表: 点播使用,包含一段视频所有ts文件动态列表: 直播使用,动态更新ts...
移动端h5直播项目|html5直播实战开发|h5仿陌陌
weixin_34362991的博客
11-04 3398
最近一些直播、小视频什么的都比较火，像陌陌、抖音、火山短视频… 于是空闲时间自己也利用html5技术也试着倒腾了下直播项目，使用到了h5+css3+iscroll+zepot+swiper+wlsPop架构开发了一个仿陌陌、火山小视频，项目效果挺不错哒！同时解决了在直播页面聊天时候页面撑起的问题。 效果图如下： // >&g...
聊天框 - 微信加载历史数据的效果原来这样实现的
最新发布
weixin_45727472的博客
05-09 476
我记得2021年的时候做过聊天功能，那时业务也只限微信小程序那时候的心路历程是：❝卧槽，让我写一个聊天功能这么高大上？？嗯？这么简单，不就画画页面来个轮询吗，加个websocket也还行吧然后，卧槽？这查看历史聊天记录什么鬼，页面闪一下不太好啊，真的能做到微信的那种效果吗❞然后一堆调研加测试，总算在小程序中查看历史记录没那么鬼畜了，但是总是感觉不是最佳解决方案。❝那时打出的子弹，一直等到现在击中了我❞最近又回想到了这个痛点，于是网上想看看有没有大佬发解决方案，结果还真被我找到了。
HTML5纯Web前端也能开发直播，不用开发服务器（使用face2face）
weixin_30505043的博客
03-11 1104
前段时间转载了某位大神的一篇文章，开发Web版一对一远程直播教室只需30分钟 - 使用face2face网络教室。非常有意思。看起来非常简单，但作为一名前端开发人员来说，还是有难度。因为要开发服务器端的接口，这对我这种前端初学者来说就无能为力了。 无意中注意到，在face2face的官方文档上，其实还介绍了一种纯前端的开发方式，使用这种方式，不用写任何服务器代码，也能做直播。 face2fac...
EasyNVR H5无插件摄像机直播解决方案前端解析之：监控实时直播的四分屏的前端展示...
weixin_30782331的博客
08-30 552
完成运行效果图： 一、四分屏展示样式布局 1.通过html、css等来进行样式排版 根据需求的四分屏的样式；来合理的划分出四个大块，分别用于放置四个播放器； 以四等分结构为例进行前端的排版； html样式布局： <div class="row col-sm-9 video-show"> <d...
html5 在线直播代码,用HTML5代码实现烘托直播间疯狂点赞动画氛围（附全部源码）...
weixin_35695142的博客
05-31 810
用HTML5代码实现烘托直播间疯狂点赞动画氛围(附全部源码)直播有一个很重要的互动：点赞。为了烘托直播间的氛围，直播相对于普通视频或者文本内容，点赞通常有两个特殊需求：点赞动作无限次，引导用户疯狂点赞直播间的所有疯狂点赞，都需要在所有用户界面都动画展现出来我们先来看效果图：从效果图上我们还看到有几点重要信息：点赞动画图片大小不一，运动轨迹也是随机的 点赞动画图片都是先放大再匀速运动。 快到顶部的时...
很好的FLEX表情聊天界面
03-25
NULL 博文链接：https://as3.iteye.com/blog/1143076
csss.rar_flex_flex 聊天
09-19
6. **布局管理器 - Flex Box (Flex 布局)**：在Flex应用中，`Flex布局`是用于组织和定位组件的强大工具，尤其适合构建聊天界面。它可以处理不同屏幕尺寸和方向下的自适应布局，使组件能够根据需要自动调整大小和位置...
Flex聊天程序
09-14
8. **用户界面组件**：Flex提供了一系列预定义的UI组件，如文本输入框、按钮、列表等，可以方便地构建聊天界面。开发者可以通过自定义组件来满足特定的设计需求。 9. **安全性**：考虑到聊天应用通常涉及用户隐私，...
flex 多个聊天实例
03-17
MXML用于定义界面布局，而ActionScript则用于编写业务逻辑和交互代码。 2. **Flex SDK与Flex Builder**：理解Flex开发环境，如Flex SDK和Flex Builder（现为Flash Builder）的使用，它们提供了强大的编译器和调试...
flex 基于桌面的聊天项目
07-24
之前高过一阵flex，要格式化硬盘了，怕硬盘坏了，现在放弃flex的学习了，共享出来，时间长了记不得内容了，看名字像是聊天的，如果下载了不是聊天的表骂人哈，千万别把公司的项目传了上去，god save me
刚学会Flex自己做的一个简单的聊天室
04-23
简单的的Flex小事例 刚学会Flex自己做的一个简单的聊天室 请多多指教哦
基于Flex的Flash聊天室的实现
03-22
NULL 博文链接：https://tomyz0223.iteye.com/blog/894997
FLex+Socket实现的聊天室程序（一）
03-01
博文链接：https://xiaoa7.iteye.com/blog/247963
直播源码搭建教程，页面百叶窗效果 html+css
云豹网络科技
03-19 167
直播源码搭建教程，页面百叶窗效果 html+css实现的相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
弹性布局flex！！之精美聊天框案例（舔狗日记）！！
weixin_54345600的博客
06-20 1000
霸道总裁之得不到则毁掉！ 该案例大量使用flex布局，提高自己flex布局的熟练度，本人运用VScode进行开发。 你做完次案例将学到 运用CSS绘画三角形。 flex布局： justify-content，align-items，order，flex。 做一个舔狗~。 建立一个html文件 编写HTML代码 <!-- 大盒子 --> <!DOCTYPE html> <html lang="en"> <head> <met
flex聊天页面窗口发送
骑士的专栏
03-15 926
Application_demo --> <![CDATA[ import mx.managers.PopUpManager; private function onSendExpress(event:MouseEvent):void { var view:BTitleWndow_Demo = new BTitleWndo
小程序 flex布局聊天界面
09-29
小程序中的flex布局可以很方便地实现聊天界面的排布。可以将聊天界面的每个聊天框都包裹在一个flex容器中，然后使用flex-direction属性来控制聊天框的排列方向。一般来说，聊天界面是从上往下排列的，所以可以将flex-direction设置为column。接着，可以使用justify-content属性来控制聊天框在垂直方向上的对齐方式，比如设置为flex-start表示顶部对齐，设置为flex-end表示底部对齐。而每个聊天框内部的内容通常都是水平居中的，可以使用align-items属性来实现。具体的实现方法可以参考下面的代码示例： ```css .chat-container { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .chat-bubble { /* 聊天框的样式 */ } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值