聊天页面样式
聊天页面样式
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./bootstrap-icons/font/bootstrap-icons.css" /><title>Document</title><style>* {margin: 0px;padding: 0px;}.container {width: 100vw;height: 100vh;background-color: #6d6767;display: flex;justify-content: center;align-items: center;}.chat-box {width: 60%;height: 70%;background-color: #f8f8f8;display: flex;}.left-box {width: 50px;background-color: #2e2e2e;}.right-box {flex: 1;background-color: #f7f7f7;display: flex;}.main-box {flex: 7;display: flex;flex-direction: column;justify-content: space-between;}.menu-box {flex: 3;display: flex;flex-direction: column;border-right: 1px solid #d6d6d6;}.menu-top {height: 60px;box-sizing: border-box;position: relative;}.search-box {display: flex;width: 95%;height: 20px;justify-content: space-between;padding: 4px 5px;align-items: center;position: absolute;bottom: 10px;}.search-box input {line-height: 20px;width: 70%;border: 0px;outline: none;background: transparent;}.search-box i {padding: 0px;background-color: #d1d1d1;border-radius: 2px;font-size: 15px;}.search {display: flex;align-items: center;justify-content: center;background-color: #d1d1d1;width: 85%;position: relative;border-radius: 3px;}.search i {font-size: 12px;position: absolute;left: 5px;}.menu-content {flex: 1;background-color: #d3d1d0;height: 100%;overflow: hidden;}.menu-list::-webkit-scrollbar {width: 1px;}.menu-list {display: flex;flex-direction: column;height: 100%;overflow-x: hidden;}.menu-item {display: flex;justify-content: center;height: 60px;width: 100%;margin: 5px;}.menu-left img {width: 100%;height: 100%;}.menu-right {flex: 1;display: flex;flex-direction: column;}.menu-right .menu-date {font-size: 12px;color: #6d6767;}.menu-right-msg {margin-bottom: 5px;margin-left: 8px;font-size: 12px;color: #6d6767;}.menu-right-top {display: flex;justify-content: space-between;align-items: center;margin: auto 10px;font-size: 15px;}.main-top {height: 60px;border-bottom: 1px solid #d3d1d0;display: flex;align-items: center;font-size: 28px;padding-left: 5px;}.main-content {flex: 6;border-bottom: 1px solid #d3d1d0;overflow-y: auto;}.main-content::-webkit-scrollbar {width: 1px;}.main-left {display: flex;margin: 15px auto;}.main-left img {width: 30px;height: 30px;}.main-left .main-msg {margin-left: 10px;background-color: #ffffff;line-height: 30px;max-width: 250px;font-size: 15px;letter-spacing: 5px;}.main-right {display: flex;width: 100%;flex-direction: row-reverse;margin: 15px auto;}.main-right img {width: 30px;height: 30px;}.main-right .main-msg {margin-right: 10px;background-color: #89d961;line-height: 30px;max-width: 250px;font-size: 15px;letter-spacing: 5px;}.main-input {flex: 3;display: flex;flex-direction: column;}.main-input-top {height: 30px;display: flex;justify-content: space-between;padding: 5px 10px;}.main-input-top i{margin: auto 5px;}.main-input-content {flex: 1;}.main-input-send {height: 50px;display: flex;align-items: center;flex-direction: row-reverse;padding-right: 20px;}.main-input-send a {font-size: 15px;background: #e9e9e9;color: #07c160;width: 80px;height: 30px;border-radius: 2px;text-decoration: none;cursor: pointer;text-align: center;line-height: 30px;}.btn1:hover{background: #89d961;}.main-input-content textarea{background: transparent;width: 100%;border: 0px;outline: none;height: 100%;}</style></head><body><div class="container"><div class="chat-box"><div class="left-box"></div><div class="right-box"><div class="menu-box"><div class="menu-top"><div class="search-box"><div class="search"><i class="bi bi-search"></i><input type="text" placeholder="搜索" /></div><i class="bi bi-plus-lg"></i></div></div><div class="menu-content"><div class="menu-list"><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div><div class="menu-item"><div class="menu-left"><img src="./assets/head.png" alt="" srcset="" /></div><div class="menu-right"><div class="menu-right-top"><div class="menu-title">张三</div><div class="menu-date">24/6/10</div></div><div class="menu-right-msg">没有其他的了</div></div></div></div></div></div><div class="main-box"><div class="main-top"><div class="main-top title">张三</div></div><div class="main-content"><div class="main-left"><img src="./assets/head.png" alt="" /><div class="main-msg">比如一开始就它显示</div></div><div class="main-right"><img src="./assets/head.png" alt="" /><div class="main-msg">当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。有时候我们需要自定义滚动条的样式</div></div><div class="main-right"><img src="./assets/head.png" alt="" /><div class="main-msg">web中文字和div常用的居中方法</div></div></div><div class="main-input"><div class="main-input-top"><div class="main-input-top-left"><i class="bi bi-emoji-smile"></i><i class="bi bi-folder2"></i><i class="bi bi-scissors"></i><i class="bi bi-chat-dots"></i></div><div class="main-input-top-right"><i class="bi bi-telephone"></i><i class="bi bi-camera-video"></i></div></div><div class="main-input-content"><textarea></textarea></div><div class="main-input-send"><a class="btn1">发送(S)</a></div></div></div></div></div></div></body>
</html>相关文章：
聊天页面样式
聊天页面样式 代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><link rel"styleshee…...
PHP入门教程3：数组和字符串操作
PHP入门教程3：数组和字符串操作 在前两篇文章中，我们学习了PHP的基础语法、控制结构和函数的使用。本文将重点介绍数组和字符串的高级操作，这些是PHP编程中非常常见且重要的内容。本文将包含以下几个部分： 数组的类型和操作多维…...
mariadb
MariaDB安装配置、使用、授权、增删改查以及数据库备份与恢复 MariaDB安装配置、使用、授权、增删改查以及数据库备份与恢复_mariadb安装及配置教程-CSDN博客mariadb 恢复： ERROR! MySQL server PID file could not be found! 170104 23:04:21 InnoDB: The InnoD…...
C/C++：指针用法详解
C/C：指针 指针概念 指针变量也是一个变量 指针存放的内容是一个地址，该地址指向一块内存空间 指针是一种数据类型 指针变量定义 内存最小单位：BYTE字节（比特） 对于内存，每个BYTE都有一个唯一不同的编号…...
JDK8-17新特性
一、JDK8新特性:Lambda表达式 1.Lambda表达式及其使用举例 Lambda是一个匿名函数，我们可以把Lambda表达式理解为是一段可以传递的代码(将代码像数据一样进行传递)。使用它可以写出更简洁、更灵活的代码。作为一种更紧凑的代码风格，使Java的语言表达能力…...
文件加载的管理：探索三种方法
目录 1. 空闲表法和空闲链表法 空闲表法 优点 缺点 示例 空闲链表法 优点 缺点 示例 优缺点对比 适用场景 综合示例 2. 位图法 概述 优点 缺点 适用场景 示例 位图法的操作 3. 成组链接法 概述 优点 缺点 适用场景 示例 实现细节 结语 在计算机系统中…...
【机器学习】基于Transformer架构的移动设备图像分类模型MobileViT
1.引言 1.1. MobileViT是什么？ MobileViT是一种基于Transformer的轻量级视觉模型，专为移动端设备上的图像分类任务而设计。 背景与目的： MobileViT由Google在2021年提出，旨在解决移动设备上的实时图像分类需求。与传统的卷积神…...
grub引导LinuxMint
注意事项：文件系统必须是FAT32 安装 sudo apt install gparted -y 分区管理软件 使用gparted分区和查看设备路径 sudo apt-get install grub-efi-amd64 #/dev/sdd1 是需要制作分区引导的设备路径 sudo mount /dev/sdd1 /mnt/123 #bios sudo grub-install --targe…...
Hadoop 2.0：主流开源云架构（四）
目录 五、Hadoop 2.0访问接口（一）访问接口综述（二）浏览器接口（三）命令行接口 六、Hadoop 2.0编程接口（一）HDFS编程（二）Yarn编程 五、Hadoop 2.0访问接口 &am…...
PythonSQL应用随笔4——PySpark创建SQL临时表
零、前言 Python中直接跑SQL，可以很好的解决数据导过来导过去的问题，本文方法主要针对大运算量时，如何更好地让Python和SQL打好配合。 工具：Zeppelin 语法：PySpark（Apache Spark的Python API）…...
C# OpenCvSharp 矩阵计算-determinant、trace、eigen、calcCovarMatrix、solve
🚀 在C#中使用OpenCvSharp库进行矩阵操作和图像处理 在C#中使用OpenCvSharp库，可以实现各种矩阵操作和图像处理功能。以下是对所列函数的详细解释和示例，包括运算过程和结果。📊✨ 1. determinant - 计算行列式 🧮 定义： double determinant(InputArray mtx); 参数…...
知识普及:什么是边缘计算（Edge Computing）？
边缘计算是一种分布式计算架构，它将数据处理、存储和服务功能移近数据产生的边缘位置，即接近数据源和用户的位置，而不是依赖中心化的数据中心或云计算平台。边缘计算的核心思想是在靠近终端设备的位置进行数据处理，以降低延迟、减…...
大型企业IT基础架构和应用运维体系
大型企业IT基础架构和应用运维体系 在数字化转型的浪潮中，大型企业面临着日益复杂的IT环境。高效的IT基础架构和应用运维体系，是确保企业业务连续性和竞争力的关键。本文将探讨大型企业如何构建强健的IT基础架构，并建立高效的应用运维体系&a…...
【源码】16国语言交易所源码/币币交易+期权交易+秒合约交易+永续合约+交割合约+新币申购+投资理财/手机端uniapp纯源码+PC纯源码+后端PHP
测试环境：Linux系统CentOS7.6、宝塔面板、Nginx、PHP7.3、MySQL5.6，根目录public，伪静态laravel5，开启ssl证书 语言：16种，看图 这套带前端uniapp纯源码，手机端和pc端都有纯源码，后…...
word空白页删除不了怎么办？
上方菜单栏点击“视图”，下方点击“大纲视图”。找到文档分页符的位置。将光标放在要删除的分节符前，按下键盘上的“Delet”键删除分页符。...
Java web应用性能分析之【prometheus+Grafana监控springboot服务和服务器监控】
Java web应用性能分析之【java进程问题分析概叙】-CSDN博客 Java web应用性能分析之【java进程问题分析工具】-CSDN博客 Java web应用性能分析之【jvisualvm远程连接云服务器】-CSDN博客 Java web应用性能分析之【java进程问题分析定位】-CSDN博客 Java web应用性能分析之【…...
JavaEE——声明式事务管理案例：实现用户登录
一、案例要求 本案例要求在控制台输入用户名密码，如果用户账号密码正确则显示用户所属班级，如果登录失败则显示登录失败。实现用户登录项目运行成功后控制台效果如下所示。 欢迎来到学生管理系统 请输入用户名： zhangsan 请输入zhangsan的密…...
解决用Three.js实现嘴型和语音同步时只能播放部分部位的问题 Three.js同时渲染播放多个组件变形动画的方法
前言 参考这篇文章ThreeJSChatGPT 实现前端3D数字人AI互动，前面搭后端、训练模型组内小伙伴都没有什么问题，到前端的时候，脸部就出问题了。看我是怎么解决的。 好文章啊，可惜百度前几个都找不到，o(╥﹏╥)o 问题情况 …...
阅读笔记：明朝那些事儿太监弄乱的王朝
阅读豆评高分作品《明朝那些事儿太监弄乱的王朝》第三部，截止到今天告一段落了，前两部皇帝，太子相对比较少，了解故事的主线，分支不算多，记忆起来还能应付过来，第三部皇帝，太子更换的…...
算法第六天：力扣第977题有序数组的平方
一、977.有序数组的平方的链接与题目描述 977. 有序数组的平方的链接如下所示：https://leetcode.cn/problems/squares-of-a-sorted-array/description/https://leetcode.cn/problems/squares-of-a-sorted-array/description/ 给你一个按 非递减顺序 排序的整数数组…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程，代码下载：这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中，**知识蒸馏（Knowledge Distillation）**被广泛应用，作为提升模型…...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南：从入门到实战 一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
安卓基础（Java 和 Gradle 版本）
1. 设置项目的 JDK 版本 方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...