仿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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/167292.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/167292.shtml
英文地址，請注明出處：http://en.pswp.cn/news/167292.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Android Tombstone 與Debuggerd 原理淺談

Android Tombstone 與Debuggerd 原理淺談

一、前言 Android系統類問題主要有stability、performance、power、security。Android集成一個守護進程tombstoned是android平臺的一個守護進程&#xff0c;它注冊成3個socket服務端&#xff0c;客戶端封裝在crash_dump和debuggerd_client。 crash_dump用于跟蹤定位C crash&am…
閱讀更多...
前端入門（三）Vue生命周期、組件技術、事件總線、

前端入門（三）Vue生命周期、組件技術、事件總線、

文章目錄 Vue生命周期Vue 組件化編程 - .vue文件非單文件組件組件的注意點組件嵌套Vue實例對象和VueComponent實例對象Js對象原型與原型鏈Vue與VueComponent的重要內置關系 應用單文件組件構建 Vue腳手架 - vue.cli項目文件結構refpropsmixin插件scoped樣式 Vue生命周期 1、bef…
閱讀更多...
MBA-論證有效性分析

MBA-論證有效性分析

論證有效性分析∶分析下述論證中存在的缺陷和漏洞&#xff0c;選擇若干要點&#xff0c;寫一篇 600 字左石的文章.對該論證的有效性進行分析和評論。&#xff08;論證有效性分析的一般要點是∶概念特別是核心概念的界定和使用是否準確并前后一致&#xff0c;有無各種明顯的邏輯…
閱讀更多...
cineSync 3.3新功能: 深入iconik集成、激光工具、OTIOZ支持等

cineSync 3.3新功能: 深入iconik集成、激光工具、OTIOZ支持等

cineSync 3.3為大家帶來了靈活性和精準度&#xff0c;使連接審閱會話與iconik中的媒體管理和存儲更加容易&#xff0c;并且引入了顏色配置文件以快速測試顏色配置&#xff0c;還有通過激光指針等新工具帶來新的可能性。 在ftrack&#xff0c;我們意識到當今的遠程創意工作流比以…
閱讀更多...
vue3 導出數據為 excel 文件

vue3 導出數據為 excel 文件

文章目錄 安裝插件封裝組件 -- Export2Excel.js多表封裝界面使用 -- 數據處理成二維數組更多 菜鳥最近做了一個需求&#xff0c;就是需要上傳表單并識別&#xff0c;然后識別出來的內容要可以修改&#xff0c;然后想的就是識別內容變成 form 表單&#xff0c;所以并沒有使用 Sp…
閱讀更多...
反爬蟲機制與反爬蟲技術(二)

反爬蟲機制與反爬蟲技術(二)

反爬蟲機制與反爬蟲技術二 1、動態頁面處理與驗證碼識別概述2、反爬蟲案例：頁面登錄與滑塊驗證碼處理2.1、用例簡介2.2、庫（模塊）簡介2.3、網頁分析2.4、Selenium準備操作2.5、頁面登錄2.6、模糊移動滑塊測試3、滑塊驗證碼處理：精確移動滑塊3.1、精確移動滑塊的原理3.2、滑…
閱讀更多...
【模塊補充】importlib

【模塊補充】importlib

importlib 【一】介紹 importlib 模塊是 Python 中用于動態加載和導入模塊的內置模塊。它提供了一組函數和類&#xff0c;使得我們可以在運行時根據需要加載模塊&#xff0c;并且可以對已導入的模塊進行操作和管理。 【二】詳解及示例&#xff1a; 【1】動態加載模塊&#…
閱讀更多...
PyQt6簡介

PyQt6簡介

鋒哥原創的PyQt6視頻教程&#xff1a; 2024版 PyQt6 Python桌面開發 視頻教程(無廢話版) 玩命更新中~_嗶哩嗶哩_bilibili2024版 PyQt6 Python桌面開發 視頻教程(無廢話版) 玩命更新中~共計12條視頻&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面開發 視頻教程(無廢話版…
閱讀更多...
企業遠程訪問業務系統：對比MPLS專線，貝銳蒲公英為何更優優勢？

企業遠程訪問業務系統：對比MPLS專線，貝銳蒲公英為何更優優勢？

如今&#xff0c;企業大多都會采用OA、ERP、CRM等各種數字化業務系統。 私有云、公有云混合架構也變得越來越常見。 比如&#xff1a;研發系統部署在公司本地私有云、確保數據安全&#xff0c;OA采用公有云方案、滿足隨時隨地訪問需求。 如此一來&#xff0c;也產生了遠程訪問…
閱讀更多...
js前端跨屏效果

js前端跨屏效果

效果: 三個球 源碼: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>三個球</title> </h…
閱讀更多...
js實現圖片懶加載

js實現圖片懶加載

方式一&#xff1a;html實現 在img標簽加上 loading"lazy" 方式二&#xff1a;js實現 通過js監聽頁面的滾動&#xff0c;實現的原理主要是判斷當前圖片是否到了可視區域&#xff1a; 拿到所有的圖片 dom 。遍歷每個圖片判斷當前圖片是否到了可視區范圍內。如果到了…
閱讀更多...
Maven項目下詳細的SSM整合流程

Maven項目下詳細的SSM整合流程

文章目錄 &#x1f389;SSM整合流程一、兩個容器整合? 1、先準備好數據庫config.properties連接、mybatis-config.xml&#x1f38a; 2、容器一&#xff1a;優先配置spring.xml文件&#x1f38a; 3、容器二&#xff1a;配置springMVC.xml文件&#x1f38a; 4、Tomcat整合spring…
閱讀更多...
解釋PCIe MSI 中斷要求中斷向量連續？PCIe 規范里并沒有明確指出

解釋PCIe MSI 中斷要求中斷向量連續？PCIe 規范里并沒有明確指出

MSI 向量必須連續&#xff1f; 前言 MSI 物理條件&#xff0c;MSI 中斷產生的邏輯是RC初始化的時候&#xff0c;由軟件將配置寫入到 EP 的 2 個寄存器中&#xff0c;這兩個寄存器一個指示的是地址 Message Address&#xff0c;一個指示的是數據 Message Data。當 EP 試圖觸發…
閱讀更多...
你再不學Git就來不及了！！！

你再不學Git就來不及了！！！

其他系列文章導航 設計模式合集 多線程合集 分布式合集 ES合集 文章目錄 其他系列文章導航 文章目錄 前言 版本控制 什么是版本控制 為什么要版本控制 一、認識 Git 1.1Git 簡史 1.2Git 與其他版本管理系統的主要區別 1.3Git 的三種狀態 二、Git 使用快速入門 2.1獲…
閱讀更多...
springboot使用redis緩存亂碼（key或者 value 亂碼）一招解決

springboot使用redis緩存亂碼（key或者 value 亂碼）一招解決

如果查看redis中的值是這樣 創建一個配置類就可以解決 package com.deka.config;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; i…
閱讀更多...
CPU+GPU多樣化算力，ZStack Cloud助力游戲精釀核心業務上云

CPU+GPU多樣化算力，ZStack Cloud助力游戲精釀核心業務上云

游戲精釀通過ZStack Cloud云平臺提供高性能、高可用的云主機、云存儲和云網絡&#xff1b;前期通過超融合架構快速構建云基礎設施&#xff0c;來支持Jira、Redis等關鍵業務&#xff1b;并實現對原有私有云平臺業務的替代&#xff0c;按需將原有私有云業務滾動遷移到ZStack Clou…
閱讀更多...
移動端瀏覽器 jquery 獲取 pdf blob文件流 預覽pdf

移動端瀏覽器 jquery 獲取 pdf blob文件流 預覽pdf

最近遇到一個需求&#xff0c;一個古早的移動端 juery 項目要求做一個頁面&#xff0c;從接口獲取 pdf 文件流&#xff0c;然后預覽出來 這里使用第三方工具&#xff1a;pdf.js 代碼如下&#xff1a; // 引入相關文件<script src"../js/pdf.js" type"text…
閱讀更多...
N_1 驗證密碼

N_1 驗證密碼

N_1 驗證密碼 題目 設計一個用戶密碼驗證程序&#xff0c;要求密碼輸入只有3次機會&#xff0c;且密碼中不能包含”*”字符。 分析 需要考慮3個問題&#xff1a;驗證次數、特殊字符和正誤密碼判斷&#xff1b;驗證次數需要使用循環&#xff0c;3個問題需要用到分支結構&…
閱讀更多...
java 系統屬性和環境屬性

java 系統屬性和環境屬性

Java系統屬性和環境屬性都是與Java應用程序相關的參數&#xff0c;但它們有以下區別&#xff1a; 系統屬性是由Java虛擬機&#xff08;JVM&#xff09;設置的&#xff0c;而環境屬性是由操作系統設置的。 系統屬性是以“-D”開頭的命令行參數傳遞給JVM的&#xff0c;而環境屬性…
閱讀更多...
深入理解Spring AOP的工作流程

深入理解Spring AOP的工作流程

文章目錄 引言什么是AOP&#xff1f;Spring AOP的工作原理1. JDK動態代理2. CGLIB代理 Spring AOP的注解方式Aspect注解EnableAspectJAutoProxy注解 Spring AOP的工作流程拓展應用1. 自定義注解2. 異常處理3. 切面優先級 結論 &#x1f389;深入理解Spring AOP的工作流程 ☆* o…
閱讀更多...
最新文章

Copyright @ 2022~2023