当前位置：首页 > news >正文

仿ChatGPT对话前端页面（内含源码）

news 2026/2/9 13:09:55

仿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的前端页面。具体我们的效果图是长这样，其中除了时间是动态的之外，其他都是假数据。接下来让我们从布局和样式的角度…...

编程日记 2023/11/25 13:34:17

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…...

编程日记 2023/11/25 13:33:16

程序员必备工具篇 / 程序员必备基础：Git

前言掌握 Git 命令是每位程序员必备的基础，之前一直是用 smartGit 工具，直到看到大佬们都是在用 Git 命令操作的，回想一下，发现有些 Git 命令我都忘记了，于是写了这篇博文，复习一下～ https://github.com/whx123/JavaHome 公众号：顺哥轻创文章目录 Git 是什么？Git …...

编程日记 2023/11/25 13:31:15

MacBook使用指南

一、安装及卸载Windows系统 1、卸载Windows系统步骤① 点击下侧任务栏中的“启动台”，进入程序坞，点击"其他",选择“启动转换助理” 步骤② 点击“继续”，接着点击“恢复”，即可卸载Windows系统 2、安装Windows系统 …...

编程日记 2023/11/25 13:30:14

数据库的事务的基本特性，事务的隔离级别，事务隔离级别如何在java代码中使用，使用MySQL数据库演示不同隔离级别下的并发问题

文章目录数据库的事务的基本特性事务的四大特性(ACID)4.1、原子性（Atomicity）4.2、一致性（Consistency）4.3、隔离性（Isolation）4.4、持久性（Durability） 事务的隔离级别5.1、事务不…...

编程日记 2023/11/25 13:29:13

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 潜在…...

编程日记 2023/11/25 13:28:12

Linux：创建进程 -- fork，到底是什么？

相信大家在初学进程时，对fork函数创建进程一定会有很多的困惑，比如： 1.fork做了什么事情?? 2.为什么fork函数会有两个返回值?3.为什么fork的两个返回值，会给父进程谅回子进程pid，给子进程返回0?4.fork之后:父子进…...

编程日记 2023/11/25 13:27:11

基于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…...

编程日记 2023/11/25 13:26:10

Clickhouse设置多磁盘存储策略

设置多磁盘存储 clickhouse安装完成以后，配置了一个默认的存储空间， 这个只能配置一个目录，如果要使用多个磁盘目录，则需要配置磁盘组策略查看当前的存储策略 select name, path, formatReadableSize(free_space) as free, fo…...

编程日记 2023/11/25 13:25:09

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…...

编程日记 2023/11/25 13:24:08

媒体增加日活量的有效策略

随着数字媒体的蓬勃发展，提高日活量成为媒体平台追求的重要目标之一。日活量的增加不仅意味着更广泛的影响力，还能为媒体平台带来更多的商业机会。以下是一些有效的策略，可帮助媒体提高日活量： admaoyan猫眼聚合内容优质化&#…...

编程日记 2023/11/25 13:23:07

es6新特性总结

1、支持了let和const，为了防止var声明变量带来的变量提升 （1）、存在块级作用域不存在变量提升（考虑暂时性死区） （2）、不允许重复声明（包括普通变量和函数参数）变量提升…...

编程日记 2023/11/25 13:22:06

Spring Boot + hutool 创建海报图片

Spring Boot hutool 创建海报图片 /*** 分享,生成图片* param id* return*/GetMapping("/getShareImg")public void getShareImg(String id,HttpServletResponse response) throws IOException {CouponConsignSaleClassify byId couponConsignSaleClassifyService…...

编程日记 2023/11/25 13:21:05

0002Java程序设计-springboot在线考试系统小程序

文章目录 **摘要****目录**系统实现开发环境编程技术交流、源码分享、模板分享、网课分享企鹅🐧裙：776871563 摘要本毕业设计的内容是设计并且实现一个基于springboot的在线考试系统小程序。它是在Windows下，以MYSQL为数据库开发平台&…...

编程日记 2023/11/25 13:20:04

Linux(Centos)上使用crontab实现定时任务(定时执行脚本)

场景 Windows中通过bat定时执行命令和mysqldump实现数据库备份： Windows中通过bat定时执行命令和mysqldump实现数据库备份_mysqldump bat-CSDN博客上面讲windows中使用bat实现定时任务的方式，如果是在linux上可以通过crontab实现。 cron是服务名称。…...

编程日记 2023/11/25 13:19:03

【Leetcode合集】20. 有效的括号

20. 有效的括号 20. 有效的括号代码仓库地址： https://github.com/slience-me/Leetcode 个人博客 ：https://slienceme.xyz 给定一个只包括 (，)，{，}，[，] 的字符串 s ，判断字符串…...

编程日记 2023/11/25 13:18:02

OpenGL 绘制线（Qt）

文章目录一、简介二、实现代码三、实现效果参考资料一、简介这里同样对OpenGL中的绘制线操作进行封装，便于后续的操作，很多形状也都是基于线来生成的，如圆形等。二、实现代码 LineDrawable.h #ifndef LINE_DRAWABLE_H #define LINE_DRAWABLE_H#include...

编程日记 2023/11/25 13:17:01

Java | 多线程并发编程CountDownLatch实践

关注：CodingTechWork 引言在一次数据割接需求中，数据需要通过编程的方式进行转移割接到新平台，此时若串行化方式，无疑会拉锯此次战斗，所以首当其冲要使用并发编程来降低割接时长。本次主要考虑使用CountDownLatc…...

编程日记 2023/11/25 13:14:59

分布式定时任务系列6：XXL-job触发日志过大引发的CPU告警

传送门分布式定时任务系列1：XXL-job安装分布式定时任务系列2：XXL-job使用分布式定时任务系列3：任务执行引擎设计分布式定时任务系列4：任务执行引擎设计续分布式定时任务系列5：XXL-job中blockingQueue的应用 …...

编程日记 2023/11/25 13:12:56

Spark RDD、DataFrame和Dataset的区别和联系

一、三种数据介绍是Spark中的三种不同的数据结构，它们都可以用于分布式数据处理，但是它们的实现方式和使用方法略有不同。 RDD（弹性分布式数据集） RDD是Spark最初的核心数据结构，它是一个分布式的、只读的、可容错的…...

编程日记 2023/11/25 13:11:56

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石，设计模式在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类：一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

【磁盘】每天掌握一个Linux命令 - iostat

目录【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景注意事项【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。一、为何需要创建独立账号？ 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

深度学习习题2

1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08