仿ChatGPT对话前端页面（内含源码）
仿ChatGPT对话前端页面（内含源码）
- 前言
- 布局
- 样式和Js部分关键点
- 全部源码
前言
本文主要讲解如何做出类似ChatGPT的前端页面。具体我们的效果图是长这样，其中除了时间是动态的之外，其他都是假数据。接下来让我们从布局和样式的角度分析，如何做出来这样的页面，同时文末有全部源码，需要自取。
布局
- 主要利用flex和position定位进行布局。
- 首先是用左右布局作为大的布局分工，而最大的布局方式用的是Flex弹性盒子布局，并且用
justify-content: center;align-content: center;对盒子进行水平垂直居中。接下来讲解左右两边布局。 - 左侧布局占据flex：1，我们发现这里有个按钮来控制视图显示隐藏，这个按钮用的是定位中的父元素
relative和子元素absolute控制垂直居中，然后用点击事件click来分别让左侧CSS的display变成none或者block进行显示隐藏。 - 左侧 上面布局：着重讲一下前端性能优化那里，那里用了一个flex布局，那个边框里…，占据了
flex：1，而右侧文字占据flex：8 - 左侧 下面布局：也是flex布局，左侧头像布局为
flex：1，而右侧占据的是3，同时头像颜色是通过linear-gradient进行设置，原角度是利用border-radius:50%进行圆的绘制。 - 右侧布局：右侧布局又分为上下两部分，上部分是通过position定位中的绝对定位
absolute，top，right属性来实现布局。 - 下部分是通过定位
position：absolute；bottom：0；right来实现布局的 - 比较有意思的是，我在JavaScript中把时间变成了动态的，是通过new一个
Date对象，然后把值赋给时间样式id的innerHTML实现的。
样式和Js部分关键点
- input点击不出现黑色边框：
outline: none; - 计算盒子宽高时候不计算它的边框和内边距：
box-sizing: border-box; - 日期是
Date日期对象自带的方法调用，创建了一个函数用于判断时间是否需要补0操作。 
用的是三目表达式作为返回值。
全部源码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;outline: none;box-sizing: border-box;}body {margin: 1vh 20px;min-height: 98vh;display: flex;justify-content: center;align-content: center;/* border: 1px solid lightgray; */box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}.left_layout {flex: 1;border-right: 1px solid lightgray;}.right_layout {flex: 6;}.father_icon {position: relative;}.son_icon {background-color: white;z-index: 99;position: absolute;font-size: 20px;border-radius: 50%;border: 1px solid lightgray;padding: 0px 5px;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;color: gray;}.son_icon_display {top: 48vh;right: -15px;}.son_icon_hideen {top: 48vh;left: 10px;display: none;}.new_chat {border: 1px solid lightgray;padding: 10px 20px;margin: 20px 10px;text-align: center;}.new_chat_text {border: 1px solid green;display: flex;}.left_person {width: 100%;padding: 1vh 20px;/* margin:20px 10px; */position: absolute;top: 90vh;border-top: 1px solid lightgray;}.false_img {/* background:linear-gradient(-135deg,#0c80cc,#009dff); */flex: 1;}.false_img_right {flex: 3;}.flase_img_son {width: 50px;height: 50px;background: linear-gradient(-135deg, #0000cc, #009dff);border: 1px solid lightblue;border-radius: 50%;}.right_layout_flex{display:flex;justify-content: center;align-items: center;}.right_layout_son{margin:0 auto 0 auto;width:100vh;height:98vh;/* border:1px solid gray; */position: relative;}.right_layout_son_ipt{position: absolute;bottom:0;}.btn{border:none;padding:10px 15px;background-color: #18a058;border-radius: 1px;color:white;}.ipt{width:85vh;margin:10px 20px;padding:10px 20px;border:1px solid lightgray;}.right_layout_myselfChat{width:200px;position: absolute;top:5px;right:0;display:flex;}.myself_chat{position: absolute;top:30px;right:80px;padding:10px 20px;border-radius: 10px;background-color: #7ae1b6;opacity: 0.8;}</style></head><body><div id="sonHiddenIcon" class="son_icon son_icon_hideen" onclick="btn_display_icon()"></div><div class="left_layout" id="left_layout_id"><div class="father_icon"><div id="sonIcon" class="son_icon son_icon_display" onclick="btn_icon()"></div><div id="left_person" class="left_person"><div style="display:flex;justify-content: center;align-items:center"><div class="false_img"><div class="flase_img_son"></div></div><div class="false_img_right"><strong>Michael Jackson</strong></div></div></div></div><div class="new_chat">新建聊天</div><div class="new_chat new_chat_text"><div class="false_img" style="border:1px solid lightgray;border-radius:20%;color:green;">...</div><div style="flex:8;color:green;">前端有哪些性能优化？</div></div></div><div class="right_layout"><!-- <div class="right_layout_flex"> --><div class="right_layout_son"><div class="right_layout_myselfChat"><div id="datatime" style="flex:2;font-size:13px;color:lightgray"></div><div style="flex:1"><div class="flase_img_son" style="width:40px;height:40px;"></div></div></div><div class="myself_chat">前端有哪些性能优化？</div><div class="right_layout_son_ipt"><input class="ipt" type="text" placeholder="来说点什么吧..."><button class="btn">发送</button></div></div><!-- </div> --></div><script>let display_sonIcon = document.getElementById('sonIcon')let hidden_sonIcon = document.getElementById('sonHiddenIcon')let left_layout_id = document.getElementById('left_layout_id')let myself_datetime=document.getElementById('datatime')display_sonIcon.innerHTML = '<'hidden_sonIcon.innerHTML = '>'function btn_icon() {left_layout_id.style.display = 'none'hidden_sonIcon.style.display = 'block'}function btn_display_icon() {left_layout_id.style.display = 'block'hidden_sonIcon.style.display = 'none'}function isZero(num){return (num < 10 ? '0' : '') + num;}function getDateTime(DOM){let datetime=new Date;let year=datetime.getFullYear();let month=isZero(datetime.getMonth()+1);let day=isZero(datetime.getDate());let hour=isZero(datetime.getHours());let minute=isZero(datetime.getMinutes());let seconds=isZero(datetime.getSeconds());let date=year+'/'+month+'/'+day+' '+hour+':'+minute+":"+seconds;DOM.innerHTML=date}getDateTime(myself_datetime)</script></body>
</html>
相关文章：
仿ChatGPT对话前端页面（内含源码）
仿ChatGPT对话前端页面（内含源码） 前言布局样式和Js部分关键点全部源码 前言 本文主要讲解如何做出类似ChatGPT的前端页面。具体我们的效果图是长这样，其中除了时间是动态的之外，其他都是假数据。接下来让我们从布局和样式的角度…...
js粒子效果(一)
效果: 代码: <!doctype html> <html> <head><meta charset"utf-8"><title>HTML5鼠标经过粒子散开动画特效</title><style>html, body {position: absolute;overflow: hidden;margin: 0;padding: 0;width: 100%;height: 1…...
程序员必备工具篇 / 程序员必备基础：Git
前言 掌握 Git 命令是每位程序员必备的基础，之前一直是用 smartGit 工具，直到看到大佬们都是在用 Git 命令操作的，回想一下，发现有些 Git 命令我都忘记了，于是写了这篇博文，复习一下～ https://github.com/whx123/JavaHome 公众号：顺哥轻创 文章目录 Git 是什么？Git …...
MacBook使用指南
一、安装及卸载Windows系统 1、卸载Windows系统 步骤① 点击下侧任务栏中的“启动台”，进入程序坞，点击"其他",选择“启动转换助理” 步骤② 点击“继续”，接着点击“恢复”，即可卸载Windows系统 2、安装Windows系统 …...
数据库的事务的基本特性，事务的隔离级别，事务隔离级别如何在java代码中使用，使用MySQL数据库演示不同隔离级别下的并发问题
文章目录 数据库的事务的基本特性事务的四大特性(ACID)4.1、原子性（Atomicity）4.2、一致性（Consistency）4.3、隔离性（Isolation）4.4、持久性（Durability） 事务的隔离级别5.1、事务不…...
Robust taboo search for the quadratic assignment problem-二次分配问题的鲁棒禁忌搜索
文章目录 摘要关键字结论研究背景1. Introduction 常用基础理论知识2. The quadratic assignment problem3. Taboo search3.1. Moves3.2 Taboo list3.3. Aspiration function3.4. Taboo list size4. Random problems5. Parallel taboo search 研究内容、成果7. Conclusion 潜在…...
Linux：创建进程 -- fork，到底是什么？
相信大家在初学进程时，对fork函数创建进程一定会有很多的困惑，比如： 1.fork做了什么事情?? 2.为什么fork函数会有两个返回值?3.为什么fork的两个返回值，会给父进程谅回子进程pid，给子进程返回0?4.fork之后:父子进…...
基于SpringBoot+vue的token验证
后端： 1，写一个验证token的拦截器 import com.fasterxml.jackson.databind.ObjectMapper; import com.ffyc.news.model.CommonData; import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest; impor…...
Clickhouse设置多磁盘存储策略
设置多磁盘存储 clickhouse安装完成以后，配置了一个默认的存储空间， 这个只能配置一个目录，如果要使用多个磁盘目录，则需要配置磁盘组策略 查看当前的存储策略 select name, path, formatReadableSize(free_space) as free, fo…...
Python开发运维：Django 4.2.7 使用Celery 5.3.5 完成异步和定时任务
目录 一、实验 1.Django使用Celery完成异步和定时任务 二、问题 1. 如何查看Django版本 一、实验 1.Django使用Celery完成异步和定时任务 (1)安装Django (2)新建Django项目 (3)初始框架 (4)urls.py引用视图views from django.contrib import admin from django.urls imp…...
媒体增加日活量的有效策略
随着数字媒体的蓬勃发展，提高日活量成为媒体平台追求的重要目标之一。日活量的增加不仅意味着更广泛的影响力，还能为媒体平台带来更多的商业机会。以下是一些有效的策略，可帮助媒体提高日活量： admaoyan猫眼聚合 内容优质化&#…...
es6新特性总结
1、支持了let和const，为了防止var声明变量带来的变量提升 （1）、存在块级作用域不存在变量提升（考虑暂时性死区） （2）、不允许重复声明（包括普通变量和函数参数）变量提升…...
Spring Boot + hutool 创建海报图片
Spring Boot hutool 创建海报图片 /*** 分享,生成图片* param id* return*/GetMapping("/getShareImg")public void getShareImg(String id,HttpServletResponse response) throws IOException {CouponConsignSaleClassify byId couponConsignSaleClassifyService…...
0002Java程序设计-springboot在线考试系统小程序
文章目录 **摘 要****目录**系统实现开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅🐧裙：776871563 摘 要 本毕业设计的内容是设计并且实现一个基于springboot的在线考试系统小程序。它是在Windows下，以MYSQL为数据库开发平台&…...
Linux(Centos)上使用crontab实现定时任务(定时执行脚本)
场景 Windows中通过bat定时执行命令和mysqldump实现数据库备份： Windows中通过bat定时执行命令和mysqldump实现数据库备份_mysqldump bat-CSDN博客 上面讲windows中使用bat实现定时任务的方式，如果是在linux上可以通过crontab实现。 cron是服务名称。…...
【Leetcode合集】20. 有效的括号
20. 有效的括号 20. 有效的括号 代码仓库地址： https://github.com/slience-me/Leetcode 个人博客 ：https://slienceme.xyz 给定一个只包括 (，)，{，}，[，] 的字符串 s ，判断字符串…...
OpenGL 绘制线（Qt）
文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里同样对OpenGL中的绘制线操作进行封装，便于后续的操作，很多形状也都是基于线来生成的，如圆形等。 二、实现代码 LineDrawable.h #ifndef LINE_DRAWABLE_H #define LINE_DRAWABLE_H#include...
Java | 多线程并发编程CountDownLatch实践
关注：CodingTechWork 引言 在一次数据割接需求中，数据需要通过编程的方式进行转移割接到新平台，此时若串行化方式，无疑会拉锯此次战斗，所以首当其冲要使用并发编程来降低割接时长。 本次主要考虑使用CountDownLatc…...
分布式定时任务系列6：XXL-job触发日志过大引发的CPU告警
传送门 分布式定时任务系列1：XXL-job安装 分布式定时任务系列2：XXL-job使用 分布式定时任务系列3：任务执行引擎设计 分布式定时任务系列4：任务执行引擎设计续 分布式定时任务系列5：XXL-job中blockingQueue的应用 …...
Spark RDD、DataFrame和Dataset的区别和联系
一、三种数据介绍 是Spark中的三种不同的数据结构，它们都可以用于分布式数据处理，但是它们的实现方式和使用方法略有不同。 RDD（弹性分布式数据集） RDD是Spark最初的核心数据结构，它是一个分布式的、只读的、可容错的…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
《Playwright：微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败 网络不同，需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...