仿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最初的核心数据结构，它是一个分布式的、只读的、可容错的…...
从TOPS到DMIPS：解码芯片算力指标的实战指南
1. 算力指标：从概念到实战的认知地图 第一次拿到芯片规格书时，我被满屏的TOPS、DMIPS、FLOPs绕晕了——这些字母组合就像加密电报，明明每个字母都认识，连起来却完全看不懂。后来在智能驾驶芯片选型项目中踩过几次坑才明白…...
高效论文降重方案：TOP10平台功能对比与选择建议，AIGC疑似率最低降至5%以下，实测超实用！
【CSDN博主私信爆仓警告】 “Neo哥，真要延毕了！我花千把块钱在某宝买的『人工降重』，知网重复率确实降到了11%，但今天预答辩前学院统一过『新版AIGC检测系统』，疑似率当场飙到92%！辅导员直接给我打回&#…...
别再手动重启了！用Systemd守护你的Sentinel控制台（Linux Ubuntu/CentOS保姆级配置）
别再手动重启了！用Systemd守护你的Sentinel控制台（Linux Ubuntu/CentOS保姆级配置） 在分布式系统的世界里，服务的稳定性往往决定了业务的连续性。想象一下凌晨三点被报警叫醒，发现核心流量管控系统因为一个简单的进程崩…...
TrollInstallerX完整指南：3分钟快速安装TrollStore的终极教程
TrollInstallerX完整指南：3分钟快速安装TrollStore的终极教程 【免费下载链接】TrollInstallerX A TrollStore installer for iOS 14.0 - 16.6.1 项目地址: https://gitcode.com/gh_mirrors/tr/TrollInstallerX TrollInstallerX是一款专为iOS 14.0至16.6.1设…...
网络安全毕设简单的题目汇总
0 选题推荐 - 网络与信息安全篇 毕业设计是大家学习生涯的最重要的里程碑，它不仅是对四年所学知识的综合运用，更是展示个人技术能力和创新思维的重要过程。选择一个合适的毕业设计题目至关重要，它应该既能体现你的专业能力，又能满…...
实战：用WRF-Chem V3.9.1.1模拟一次华北雾霾过程（附完整namelist配置与排放数据处理心得）
实战：用WRF-Chem V3.9.1.1模拟华北雾霾的完整技术指南 华北地区秋冬季雾霾问题一直是环境科学研究的重点。本文将基于WRF-Chem V3.9.1.1版本，详细介绍如何从零搭建一个针对华北雾霾事件的数值模拟系统。不同于基础教程，我们聚焦于实际科研项目…...
超级结MOSFET PCB散热如何设计优化
Q1：超级结 MOSFET 散热的核心难点是什么？为何散热设计直接影响性能？SJ-MOSFET 散热核心难点在于 **“低导通电阻下的高密度发热 高速开关的附加损耗 小型化封装的散热限制”。虽然 SJ-MOSFET 导通损耗低，但大电流、高频应用下&a…...
告别踩坑！Windows 10/11 保姆级安装SQL Server 2012全流程（附常见报错解决方案）
Windows 10/11 实战指南：SQL Server 2012 完美安装与深度排错 在数字化转型浪潮中，数据库技术依然是企业信息系统的核心支柱。尽管SQL Server 2012已不是最新版本，但仍有大量传统系统依赖这一经典平台。本文将带您穿越时空隧道，在…...
OpticsPy：用Python解决光学系统设计的矩阵计算与光线追迹难题
OpticsPy：用Python解决光学系统设计的矩阵计算与光线追迹难题 【免费下载链接】opticspy python optics module 项目地址: https://gitcode.com/gh_mirrors/op/opticspy 传统光学设计面临两大核心挑战：商业软件封闭昂贵，无法与现代化开…...
ExplorerPatcher终极指南：5分钟让Windows 11变回熟悉的老朋友
ExplorerPatcher终极指南：5分钟让Windows 11变回熟悉的老朋友 【免费下载链接】ExplorerPatcher This project aims to enhance the working environment on Windows 项目地址: https://gitcode.com/GitHub_Trending/ex/ExplorerPatcher 你是不是也和我一样&…...