孤岛-机器人/客服聊天界面布局案例

资源信息 :

发布:2023-06-06 14:19:30  阅读:331

转载本资源必须注明出处,欢迎加入官群【445790831】

上传用户 :

资源归属:孤岛无名

资源状态 :

资源状态:免费下载

资源好评 :

资源下载 :

孤岛无名的头像

资源作者:【孤岛无名】

个性签名:寒窗苦读十年一朝凤舞九天

本篇教学博客将为大家详细演示如何快码创建一个简单的机器人/客服聊天界面。接下来我们将逐步介绍这段代码的结构、样式。

首先,这是一个网页类型的代码,具有完整的网页结构,包括网页头部和网页主体两个部分。

在网页头部,我们定义了网页的信息、标题和样式。其中,样式部分使用了 CSS3 的嵌套样式表语法,通过对每个元素类名进行设计,实现了对聊天窗口各个元素的布局和样式的定义。这里简要介绍一下样式的结构:

通用样式定义:通过 * 来匹配所有元素,设置外边距、内边距和盒子模型。 对话框容器:包含对话框头、对话框主体和对话框底部三部分。设置外边距、背景颜色、圆角边框和阴影等样式。

对话框头:设置高度、背景颜色、颜色和字体大小等样式。

对话框主体:使用弹性布局实现消息的垂直显示,设置高度、内边距和滚动条样式等。

消息:消息的基本样式,包括下边距、弹性布局和对齐方式等。

消息.自己:消息的反转排列方式,使发送消息置于右侧。

头像:头像的基本样式,包括宽度、高度、右边距和圆角边框等。

头像 图片框:头像图片的样式设置,包括宽度、高度和大小适应方式等。

消息 .文本:消息文本的基本样式,包括内边距、背景颜色、圆角边框和阴影等。

消息.自己 .文本:将发送消息的文本颜色和背景颜色反转,使其与接收消息有所区别。

对话框底部:聊天框底部的元素样式,包括高度、背景颜色、边框和对齐方式等。

消息输入框:输入框的样式,包括扩展和收缩方式、高度、边框和内边距等。

发送按钮:发送按钮的样式,包括宽度、背景颜色、边框和圆角边框等。

在网页主体部分,聊天窗口由对话框容器、对话框头、对话框主体和对话框底部四个元素组成。

<!文档类型 网页类型>
<网页>
  <网页头部>
    <网页信息 文档编码="UTF8" />
    <网页标题>机器人/客服聊天界面示例</网页标题>
    <样式>
      * {
        外边距: 0;
        内边距: 0;
        盒子模型: 边界框;
      }

      网页主体 {
        背景-颜色: #f2f2f2;
        字体-组: Arial, sans-serif;
        字体-大小: 14px;
        颜色: #444;
      }

      .对话框容器 {
        显示模式: 弹性布局;
        弹性布局-方向: 垂直显示;
        内容对齐: 行尾排列;
        宽度: 400px;
        高度: 500px;
        外边距: 50px 自动 0;
        背景-颜色: #fff;
        盒子-阴影: 0 0 10px 颜色通道(0, 0, 0, 0.2);
        边框-圆角: 5px;
        溢出: 隐藏;
      }

      .对话框头 {
        显示模式: 弹性布局;
        对齐-项目: 居中;
        高度: 50px;
        内边距: 0 20px;
        背景-颜色: #2196f3;
        颜色: #fff;
        字体-大小: 18px;
      }

      .对话框主体 {
        弹性布局-扩展: 1;
        内边距: 20px;
        溢出-y轴: 滚动;
      }

      .消息 {
        下边距: 10px;
        显示模式: 弹性布局;
        对齐-项目: 居中; 
      }

      .消息.自己 {
        弹性布局-方向: 水平显示倒序; 
      }

      .头像 {
        宽度: 30px;
        高度: 30px;
        右边距: 10px;
        边框-圆角: 50%;
        背景-颜色: #ddd;
        溢出: 隐藏; 
        弹性布局-收缩: 0; 
      }

      .头像 图片框 {
        宽度: 100%;
        高度: 100%;
        对象-适应: 宽高覆盖缩放;
      }

      .消息 .文本 {
        显示模式: 内联块元素;
        内边距: 8px;
        背景-颜色: #f2f2f2;
        边框-圆角: 5px;
        盒子-阴影: 0 0 3px 颜色通道(0, 0, 0, 0.1);
        最大-宽度: 70%;
      }

      .消息.自己 .文本 {
        背景-颜色: #2196f3;
        颜色: #fff;
      }

      .对话框底部 {
        显示模式: 弹性布局;
        对齐-项目: 居中;
        高度: 50px;
        内边距: 0 0px;
        背景-颜色: #eee;
        边框-顶部: 1px 实线 #ddd;
      }

      .消息输入框 {
        弹性布局-扩展: 1;
        高度: 100%;
        右边距: 10px;
        左边距: 1px;
        边框: 无效;
        内边距: 0 10px;
        字体-大小: 16px;
        盒子模型: 边界框;
      }

      .发送按钮 {
        宽度: 80px;
        背景-颜色: #2196f3;
        颜色: #fff;
        边框: 无效;
        边框-圆角: 5px;
        轮廓: 无效;
        光标: 指针箭头;
        字体-大小: 16px;
        高度: 100%;
      }
    </样式>
  </网页头部>

  <网页主体>
    <区块 类名="对话框容器">
      <区块 类名="对话框头">机器人/客服聊天界面示例</区块>
      <区块 类名="对话框主体">
        <区块 类名="消息">
          <区块 类名="头像" 行内样式="右边距: 0;">
            <图片框 图像地址="https://img1.baidu.com/it/u=1300986109,130010496&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=504" />
          </区块>
          <区块 类名="文本">你好,有什么需要帮助的吗?</区块>
        </区块>
        <区块 类名="消息 自己">
          <区块 类名="头像">
            <图片框 图像地址="https://img1.baidu.com/it/u=421758871,1551602377&fm=253&fmt=auto&app=120&f=JPEG?w=505&h=500" />
          </区块>
          <区块 类名="文本">你好,我有一个问题想问。</区块>
        </区块>
        <区块 类名="消息">
          <区块 类名="头像" 行内样式="右边距: 0;">
            <图片框 图像地址="https://img1.baidu.com/it/u=1300986109,130010496&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=504" />
          </区块>
          <区块 类名="文本">请问是什么问题?</区块>
        </区块>
        <区块 类名="消息 自己">
          <区块 类名="头像">
            <图片框 图像地址="https://img1.baidu.com/it/u=421758871,1551602377&fm=253&fmt=auto&app=120&f=JPEG?w=505&h=500" />
          </区块>
          <区块 类名="文本">我想了解一下如何使用 AI 翻译。</区块>
        </区块>
        <区块 类名="消息">
          <区块 类名="头像" 行内样式="右边距: 0;">
            <图片框 图像地址="https://img1.baidu.com/it/u=1300986109,130010496&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=504" />
          </区块>
          <区块 类名="文本">你可以在百度翻译中使用 AI 翻译服务,非常方便快捷。</区块>
        </区块>
        <区块 类名="消息 自己">
          <区块 类名="头像">
            <图片框 图像地址="https://img1.baidu.com/it/u=421758871,1551602377&fm=253&fmt=auto&app=120&f=JPEG?w=505&h=500" />
          </区块>
          <区块 类名="文本">好的,谢谢!</区块>
        </区块>
      </区块>
      <区块 类名="对话框底部">
        <数据框 数据类型="文本输入" 类名="消息输入框"/>
        <按钮 类名="发送按钮"></按钮></按钮>
      </区块>
    </区块>

  </网页主体>
</网页>

有了以上代码,我们就可以轻松地创建一个简单而美观的机器人/客服聊天界面了!

默认排序
Generic placeholder image
Generic placeholder image
1881****1349 Time: 2024-01-27 16:02:59

Generic placeholder image
1774****0066 Time: 2024-01-27 16:06:17

6666666666666



孤岛-机器人/客服聊天界面布局案例