成都平台网站建设公司,做网站运营很累吧,国内做网站公司哪家好,杭州画册设计公司仿ChatGPT对话前端页面#xff08;内含源码#xff09; 前言布局样式和Js部分关键点全部源码 前言
本文主要讲解如何做出类似ChatGPT的前端页面。具体我们的效果图是长这样#xff0c;其中除了时间是动态的之外#xff0c;其他都是假数据。接下来让我们从布局和样式的角度… 仿ChatGPT对话前端页面内含源码 前言布局样式和Js部分关键点全部源码 前言
本文主要讲解如何做出类似ChatGPT的前端页面。具体我们的效果图是长这样其中除了时间是动态的之外其他都是假数据。接下来让我们从布局和样式的角度分析如何做出来这样的页面同时文末有全部源码需要自取。
布局
主要利用flex和position定位进行布局。首先是用左右布局作为大的布局分工而最大的布局方式用的是Flex弹性盒子布局并且用justify-content: center;align-content: center;对盒子进行水平垂直居中。接下来讲解左右两边布局。左侧布局占据flex1我们发现这里有个按钮来控制视图显示隐藏这个按钮用的是定位中的父元素relative和子元素absolute控制垂直居中然后用点击事件click来分别让左侧CSS的display变成none或者block进行显示隐藏。左侧 上面布局着重讲一下前端性能优化那里那里用了一个flex布局那个边框里…占据了flex1而右侧文字占据flex8左侧 下面布局也是flex布局左侧头像布局为flex1而右侧占据的是3同时头像颜色是通过linear-gradient进行设置原角度是利用border-radius:50%进行圆的绘制。右侧布局右侧布局又分为上下两部分上部分是通过position定位中的绝对定位absolutetopright属性来实现布局。下部分是通过定位positionabsolutebottom0right来实现布局的比较有意思的是我在JavaScript中把时间变成了动态的是通过new一个Date对象然后把值赋给时间样式id的innerHTML实现的。
样式和Js部分关键点
input点击不出现黑色边框 outline: none;计算盒子宽高时候不计算它的边框和内边距box-sizing: border-box;日期是Date日期对象自带的方法调用创建了一个函数用于判断时间是否需要补0操作。
用的是三目表达式作为返回值。
全部源码
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle* {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/headbodydiv idsonHiddenIcon classson_icon son_icon_hideen onclickbtn_display_icon()/divdiv classleft_layout idleft_layout_iddiv classfather_icondiv idsonIcon classson_icon son_icon_display onclickbtn_icon()/divdiv idleft_person classleft_persondiv styledisplay:flex;justify-content: center;align-items:centerdiv classfalse_imgdiv classflase_img_son/div/divdiv classfalse_img_rightstrongMichael Jackson/strong/div/div/div/divdiv classnew_chat新建聊天/divdiv classnew_chat new_chat_textdiv classfalse_img styleborder:1px solid lightgray;border-radius:20%;color:green;.../divdiv styleflex:8;color:green;前端有哪些性能优化/div/div/divdiv classright_layout!-- div classright_layout_flex --div classright_layout_sondiv classright_layout_myselfChatdiv iddatatime styleflex:2;font-size:13px;color:lightgray/divdiv styleflex:1div classflase_img_son stylewidth:40px;height:40px;/div/div/divdiv classmyself_chat前端有哪些性能优化/divdiv classright_layout_son_iptinput classipt typetext placeholder来说点什么吧...button classbtn发送/button/div/div!-- /div --/divscriptlet display_sonIcon document.getElementById(sonIcon)let hidden_sonIcon document.getElementById(sonHiddenIcon)let left_layout_id document.getElementById(left_layout_id)let myself_datetimedocument.getElementById(datatime)display_sonIcon.innerHTML hidden_sonIcon.innerHTML function btn_icon() {left_layout_id.style.display nonehidden_sonIcon.style.display block}function btn_display_icon() {left_layout_id.style.display blockhidden_sonIcon.style.display none}function isZero(num){return (num 10 ? 0 : ) num;}function getDateTime(DOM){let datetimenew Date;let yeardatetime.getFullYear();let monthisZero(datetime.getMonth()1);let dayisZero(datetime.getDate());let hourisZero(datetime.getHours());let minuteisZero(datetime.getMinutes());let secondsisZero(datetime.getSeconds());let dateyear/month/day hour:minute:seconds;DOM.innerHTMLdate}getDateTime(myself_datetime)/script/body
/html
