弹性布局flex！！之精美聊天框案例（舔狗日记）！！

最新推荐文章于 2024-10-20 22:39:13 发布
原创 最新推荐文章于 2024-10-20 22:39:13 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flex #html #css #css3 #html5

本文通过一个生动的舔狗日记案例，深入讲解如何利用CSS3的flex布局创建精美的聊天界面。读者将学习到如何绘制CSS三角形，掌握justify-content、align-items、order和flex等flex关键属性，以及如何在VScode中进行开发。

霸道总裁之得不到则毁掉！

该案例大量使用flex布局，提高自己flex布局的熟练度，本人运用VScode进行开发。
你做完次案例将学到

  1. 运用CSS绘画三角形。
  2. flex布局：
    justify-content，align-items，order，flex。
  3. 做一个舔狗~。

在这里插入图片描述

  1. 建立一个html文件

  2. 编写HTML代码

<!-- 大盒子 -->
<!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>Document</title>
</head>

<body>
    <div class="main">
        <!-- 头部 start -->
        <div class="header">
            <div class="back"></div>
            <div class="text">宝！</div>
            <div class="time">i</div>
        </div>
        <!-- 头部 end -->
        <!-- 聊天框 start -->
        <div class="word">
            <!-- ta -->
            <div class="Tchat1">
                <div class="head"></div>
                <div class="text">宝？我今天去输液的，输的什么液，想你的夜~</div>
            </div>
            <!-- wo -->
            <div class="Wchat1">
                <div class="head"></div>
                <div class="text">dog！</div>
            </div>
            <!-- ta -->
            <div class="Tchat1">
                <div class="head"></div>
                <div class="text">我养你啊 笨！</div>
            </div>
            <!-- wo -->
            <div class="Wchat1">
                <div class="head"></div>
                <div class="text">dog!</div>
            </div>
            <!-- ta -->
            <div class="Tchat1">
                <div class="head"></div>
                <div class="text">你对一个喜欢你 关心你 担心你的人就这么爱答不理的。</div>
            </div>
            <!-- wo -->
            <div class="Wchat1">
                <div class="head"></div>
                <div class="text">dog！</div>
            </div>
        </div>
        <!-- 聊天框 end -->
        <!-- 键盘 start -->
        <div class="key">
            <div class="one">
                <li>Q</li>
                <li>W</li>
                <li>E</li>
                <li>R</li>
                <li>T</li>
                <li>Y</li>
                <li>U</li>
                <li>I</li>
                <li>O</li>
                <li>P</li>
            </div>
            <div class="two">
                <li>A</li>
                <li>S</li>
                <li>D</li>
                <li>F</li>
                <li>G</li>
                <li>H</li>
                <li>J</li>
                <li>K</li>
                <li>L</li>
            </div>
            <div class="three">
                <li></li>
                <li>S</li>
                <li>D</li>
                <li>F</li>
                <li>G</li>
                <li>H</li>
                <li>J</li>
                <li>K</li>
                <li></li>
            </div>
            <div class="show">
                王 思 聪 d o g ！
            </div>
        </div>
        <!-- 键盘 end -->
    </div>
</body>

</html>
  1. 编写CSS代码
@font-face {
       font-family: 'icomoon';
       src: url('fonts/icomoon.eot?p4ssmb');
       src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
           url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
           url('fonts/icomoon.woff?p4ssmb') format('woff'),
           url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
       font-weight: normal;
       font-style: normal;
       font-display: block;
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
   }

   .main {
       width: 360px;
       height: 600px;
       background-color: #303056;
   }

   .main .header {
       display: flex;
       justify-content: space-around;
       align-items: center;
       width: 100%;
       height: 50px;
       background: #3D4166;
   }

   .main .header .back {
       position: relative;
       width: 8px;
       height: 8px;
       border-left: 2px solid #606489;
       border-bottom: 2px solid #606489;
       transform: rotate(50deg);
   }

   .text {
       color: #606489;
       font-size: 12px;
   }

   .time {
       width: 18px;
       height: 18px;
       border-radius: 50%;
       border: 1px solid #606489;
       text-align: center;
       line-height: 18px;
       font-size: 12px;
       color: #606489;
   }

   .word {
       width: 100%;
       height: 400px;
       /* margin-top: 40px; */
   }

   .word .Tchat1 {
       display: flex;
       padding: 0 10px;
       align-items: center;
       width: 100%;
       height: 40px;
       margin-top: 20px;
       background: #303056;
   }

   .word .Tchat1 .head {
       flex: 1;
       height: 28px;
       border: 2px solid #606060;
       border-radius: 50%;
       background: url(./zx.jpg) no-repeat;
       background-size: cover;
   }

   .word .Tchat1 .text {
       position: relative;
       margin-left: 10px;
       flex: 13;
       height: 28px;
       background: #8386A7;
       border-radius: 10px;
       text-align: center;
       line-height: 28px;
   }

   .word .Tchat1 .text::after {
       content: '';
       width: 0;
       height: 0;
       border: 5px solid transparent;
       border-right: 5px solid #8386A7;
       position: absolute;
       left: -10px;
       top: 50%;
       transform: translateY(-50%);
   }

   .word .Wchat1 {
       display: flex;
       padding: 0 10px;
       align-items: center;
       width: 100%;
       height: 40px;
       margin-top: 20px;
       background: #303056;
   }

   .word .Wchat1 .head {
       flex: 1;
       height: 28px;
       border: 2px solid #606060;
       order: 2;
       border-radius: 50%;
       background: url(./c.jpg) no-repeat;
       background-size: cover;
   }

   .word .Wchat1 .text {
       position: relative;
       margin-right: 10px;
       flex: 13;
       order: 1;
       height: 28px;
       background: #8386A7;
       border-radius: 10px;
       text-align: center;
       line-height: 28px;
   }

   .word .Wchat1 .text::before {
       content: '';
       width: 0;
       height: 0;
       border: 5px solid transparent;
       border-left: 5px solid #8386A7;
       position: absolute;
       right: -10px;
       top: 50%;
       transform: translateY(-50%);
   }

   .key {
       width: 100%;
       height: 130px;
       background: #3D4164;
   }

   li {
       list-style: none;
   }

   .key .one,
   .two,
   .three {
       display: flex;
       width: 100%;
       height: 35px;
   }


   .key .one li {
       color: #fff;
       font-size: 12px;
       flex: 1;
       text-align: center;
       line-height: 40px;
       height: 40px;
   }

   .key .two {
       padding: 0 10px;
   }

   .key .two li {
       font-size: 12px;
       color: #fff;
       flex: 1;
       text-align: center;
       line-height: 35px;
       height: 35px;
   }

   .key .three li {
       font-size: 12px;
       color: #fff;
       flex: 1;
       text-align: center;
       line-height: 35px;
       height: 35px;
   }

   .key .three li:nth-child(1) {
       font-family: 'icomoon';
       color: #10DAC4;
   }

   .key .three li:last-child {
       font-family: 'icomoon';
       color: #10DAC4;
   }

   .key .show {
       width: 100%;
       height: 25px;
       color: #fff;
       font-size: 12px;
       text-align: center;
       line-height: 25px;

   }

怎么使用CSS绘制三角？
使用到的属性有：border 。

HTML代码：

<div class="box"></div>

CSS代码：

.box {
   width: 0px;
   height: 0px;
   border: 10px solid transparent;
   border-left: 10px solid pink;
}

在这里插入图片描述

Flex弹性盒子布局案例（认识弹性布局）
百赢出品，必属精品
04-16 917
在 Flexbox 中创建一个灵活的网格布局是非常常见的。这个示例创建了一个简单的响应式布局，项目在 Flex 容器中根据空间自动换行，并在容器中均匀分布。创建了一个包含侧边栏的布局，主内容区域会自动填充剩余空间，而侧边栏则保持固定宽度。这个示例创建了一个容器，其中的内容水平和垂直居中对齐，适用于创建模态框等UI组件。这个示例创建了一个包含三个卡片的卡片布局，卡片在 Flex 容器中等距分布。此示例创建了一个水平导航菜单，其中链接在 Flex 容器中等距分布。
弹性布局案例实操(京东网页对草稿页面进行改进)
qq_56248592的博客
10-26 1030
上篇文章完成了京东网页 是给出大致的方向 让我们 将整个页面的大致布局搞定 今天 我们将图片代入到布局页面中
简单聊天框布局+滚动条自动到底
weixin_44940364的博客
02-24 721
聊天对话框滚动条自动到底
flex布局聊天界面
赵又又的博客
03-07 1385
原文地址：https://www.cnblogs.com/diligenceday/p/5985903.html 效果图： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&a
Flex： flash聊天框 表情+文字 图文混排 （思路）
Winters_huang'Blog
05-15 2676
PS：具体实现代码
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
彻底理解flex弹性布局，看这一篇就够了！
温情
06-09 1885
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称项目, 上代码理解理解 <div class="box"> <div class="item one">项目1</div> <div class="item two">项目2</div> <div class="item three">项目.
flex 弹性布局
thothsun 的博客
12-12 1261
flex 弹性布局 上一节介绍了小程序中常用的组件，在使用它们的时候，如何控制它们的位置呢？就需要用到布局了。传统的布局实现方式比较麻烦，要用多个属性配合实现。后来 flex 弹性布局出现后，用其他方式实现的布局，用 flex 布局都能更简洁地实现。本节通过几个简单的例子介绍 flex 布局的基本用法。 首先新建一个空白页面，在一个 view 里面放三个 text。在 view 的样式中添加 display:flex 将 view 设置为弹性布局，组件默认是按照从上到下、从左到右的顺序排列。 <!-
Flex弹性布局详解
技术无止境，人生仍探索。
05-03 1923
Flex弹性布局 说明：重点是分清楚主轴方向、侧轴方向的设置，作用在父元素和作用在子元素上的属性。 (1)控制方向 flex-direction控制主轴方向，取值有row(默认) |row-reverse | column | column-reverse(垂直方向翻转) align-items控制侧轴方向，取值有strenth(默认) | flex-start(顶部对齐) |flex-end(底...
【Flutter】页面布局：弹性布局（Flex）
最新发布
2303_80346267的博客
10-20 1993
在 Flutter 开发中，布局是非常重要的部分。布局系统允许开发者控制和管理界面上的组件如何排列和展示。弹性布局（`Flex`）是其中一个非常强大且常用的布局组件，它能够在水平方向或垂直方向上灵活调整子组件的空间分配比例。`Row` 和 `Column` 是 `Flex` 的特化实现，用于处理水平和垂直方向的布局。而 `Flex` 则更加通用，允许在多种场景下灵活配置。
弹性布局-less--综合案例
11-02
利用弹性布局和less制作网页，利用弹性布局和less制作网页，利用弹性布局和less制作网页，试错前行，越努力越幸运，希望可以和大家一起进步，如有不足，多多包涵！
弹性布局的简单设置实例
09-15
对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值
几个CSS3的flex弹性盒模型布局的简单例子演示
09-24
主要介绍了几个CSS3的flex弹性盒模型布局的简单例子演示,flex布局是迄今为止最强大的web布局方式,需要的朋友可以参考下
Flex 实现图文混排的控件(类似与QQ的对话窗口)
Winters_huang'Blog
02-27 3163
未验证。
Flex组件(对话框)
chiperfect的专栏
12-19 1885
java开发的总想尽快把flex和java结合起来,我也是,但这容易忽视一些基础的东西,刚把flex和java整合的第一步做完,忽然想在flex页面中弹出个对话框,不知道怎么写了,网上查了半天才出来. 原来这一句话就搞定了 Alert.show(content,title,flags,parent,closeHandle,iconClass,defaultButtonFlag);
flex聊天页面窗口发送
骑士的专栏
03-15 984
Application_demo --> <![CDATA[ import mx.managers.PopUpManager; private function onSendExpress(event:MouseEvent):void { var view:BTitleWndow_Demo = new BTitleWndo
flex 弹出对话框
zjava
08-18 193
*********************************************************************************************        flex弹出对话框示例程序分为两部分：Main.mxml和SimpleTitleWindowExample.mxml，其中Mail.mxml为主程序文件，SimpleTitleWindowExam...
弹性布局小例子
Vivian_shuang的博客
07-06 848
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style> *{ margin: 0; padding: 0; } html,body,.wrap{ height: 100%; } .wrap{ width: 100%; height: 100%; display:-webki
＜ CSS技巧 之 弹性布局( Flex布局 ) - 实例篇 ＞
一个平平无奇的技术宅
04-08 1953
W3C 推荐使用 Flex布局， 此文章讲解了一些，Flex布局实际案例。
"CSS Flex 弹性布局详解，包含案例和基础布局，适合学习和参考
在这篇文章中，我们将详细介绍CSS Flex弹性布局，并提供相关资料供大家参考。CSS Flex弹性布局是一种现代的布局技术，能够在不同大小的屏幕上实现自适应的布局效果。它使用了一套灵活的盒子模型，可以轻松地实现水平...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值