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

【创新实训个人博客】前端实现

一、 目标设定与初步改造 


核心目标: 对 `visualizer` 的前端界面 (`index.html`, `style.css`) 进行现代化改造。
基础样式: 初始化页面整体风格,为 `body` 添加了动态渐变背景;初步调整了页面顶部导航按钮、信息提示块 (`Log Visualizer`) 及底部任务输入区域 (`chat-form`) 的基础样式(颜色、圆角、阴影等)。

二、 布局调整与居中攻坚 


居中难题: 重点解决了 "Log Visualizer" 文本块和任务输入栏的水平居中问题。期间尝试了 `margin: auto`、调整父容器 `.container` 样式、引入 Flexbox 包裹层 `.main-content-wrapper` 等多种 CSS 方案。
冲突排查: 定位并移除了 `index.html` 内联 `<style>` 中与外部 CSS 冲突的 `margin-right` 规则,最终通过结合 Flexbox 和 `margin: auto` 实现了核心内容的居中。

三、 聊天气泡样式模拟 


对标需求: 模仿 QQ/微信聊天界面,重新设计消息展示区域 (`.message-container`)。
CSS 实现: 采用纯 CSS 方案,区分处理系统消息 (`.system-message`) 与普通消息。普通消息设计为左对齐的白色圆角气泡,附带指向左侧头像的小三角;系统消息则设计为居中的浅灰色背景提示条。调整了头像 (`.avatar`) 和角色名 (`.role`) 的定位。

四、 宽度优化与细节打磨


视觉调整: 根据反馈多次增加了聊天容器 (`.container#chat-box`) 及单个消息气泡 (`.message-container`) 的最大宽度 (`max-width`),优化了页面宽度观感。为聊天容器添加了背景色和圆角,使其与页面背景区分。
按钮美化: 重新设计了消息内的 "Expand"、"Copy" 按钮及底部的 "发送" 按钮,优化了尺寸、颜色、交互反馈(悬停、点击效果)。

五、最后的前端成品

http://www.xdnf.cn/news/1189.html

相关文章:

  • 【运维学习】lvs + keepalived + 主从dns 项目搭建
  • Valgrind的使用复习
  • 更换 CentOS 7.9 的系统源
  • 【软考-系统架构设计师】ATAM方法及效用树
  • 【python】pyCharm常用快捷键使用-(2)
  • C++入门基础:命名空间,缺省参数,函数重载,输入输出
  • blender 录课键位显示插件(图文傻瓜式安装)
  • .net core 项目快速接入Coze智能体-开箱即用-全局说明
  • 数据结构之BFS广度优先算法(腐烂的苹果)
  • ARINC818-1协议
  • visual Studio+Qt插件检查内存泄漏
  • Azure 私有端点和存储帐户用例
  • 基于springboot医药连锁店管理系统(源码+lw+部署文档+讲解),源码可白嫖!
  • 【论文精读】COLMAP-Free 3D Gaussian Splatting
  • vue入门:路由 router
  • [GESP202409 二级] 小杨的 N 字矩阵 题解
  • 《如何用 Function 实现动态配置驱动的处理器注册机制?》
  • Ubuntu多用户VNC远程桌面环境搭建:从零开始的完整指南
  • 多路由器通过三层交换机互相通讯(单臂路由+静态路由+默认路由版),通过三层交换机让pc端相互通讯
  • C++之类模板
  • 定制化突围:遨游防爆手机的差异化竞争策略
  • 实战|使用环信Flutter SDK构建鸿蒙HarmonyOS应用及推送配置
  • vue MarkdownIt标签多出了<p>标签导致高度变丑
  • 前端路由缓存实现
  • ServletContextAttributeListener 的用法笔记250417
  • MYSQL “Too Many Connections“ 错误解决
  • 【Python入门】文件读取全攻略:5种常用格式(csv/excel/word/ppt/pdf)一键搞定 | 附完整代码示例
  • Java基础系列-LinkedList源码解析
  • Vue项目Webpack Loader全解析:从原理到实战配置指南
  • MYOJ_11700(UVA10591)Happy Number(快乐数)(超快解法:图论思想解题)