前端布局小练习：Results Summary

​一、整体架构设计1. 布局策略使用Flexbox实现完美居中min-height: 100vh确保垂直居中主卡片固定宽高(738x512)保持设计一致性左右各50%宽度通过overflow: hidden保证圆角效果2. 视觉层次左侧渐变背景突出主要结果(76分)右侧白色背景展示详细分类通过圆角、阴影增强卡片立体感二、模块化设计左侧模块(Left)r1: 标题区域 (Your Result)r2: 环形分数展示 (76/100)r3: 评级 (Great)r4: 描述文本右侧模块(Right)l1: Summary标题tab/tab2/tab3/tab4: 四个分类条目w1: 分数显示 (带加粗的数字)tab5: Continue按钮三、关键设计要点1. 颜色系统/* 统一管理颜色变量 */.l2 { color: #ff5555; } /* Reaction - 红色 */.l3 { color: #ffb21e; } /* Memory - 橙色 */.l4 { color: #00bb8f; } /* Verbal - 绿色 */.l5 { color: #1124b0; } /* Visual - 蓝色 */2. 背景设计左侧圆形区域双重渐变(linear-gradient)创造立体感右侧分类条目不同透明度的背景色(#fff6f5, #fffbf0等)按钮悬停渐变过渡效果增强交互体验3. 响应式细节描述文本使用max-width: 220px控制换行字体大小使用rem单位保证可扩展性圆形容器使用固定宽高配合border-radius: 50%渐变颜色详解这个组件中主要使用了3处渐变效果一、左侧主背景渐变.left {background: linear-gradient(180deg, #6743ff 0%, #342bda 100%);}颜色值分析#6743ff明亮的蓝紫色起点0%位置#342bda深沉的靛蓝色终点100%位置设计意图从上到下由亮到暗的渐变营造层次感和深度蓝紫色调传递专业、可信赖的感觉与右侧白色区域形成鲜明对比突出主要结果二、圆形分数区域渐变.left .r2 {background: linear-gradient(180deg, #4c25c9 0%, #4732e0 100%);}颜色值分析#4c25c9深紫色起点#4732e0蓝紫色终点设计意图比外部背景更深、更饱和的渐变创造内凹的立体感使圆形区域成为视觉焦点突出76分这个核心数据内外两层渐变形成层次对比增强视觉深度视觉效果对比外层渐变: #6743ff → #342bda (较亮)内圆渐变: #4c25c9 → #4732e0 (较暗)↓形成内陷的视觉错觉三、按钮悬停渐变.tab5:hover {background: linear-gradient(180deg, #6743ff 0%, #342bda 100%);}设计意图悬停时复用左侧背景渐变保持视觉统一性从深蓝色(#303b59)变为蓝紫色渐变提供清晰的交互反馈通过transition: background 0.2s让变化更平滑自然四、渐变技术要点1. 方向控制/* 180deg 从上到下 */linear-gradient(180deg, 开始颜色, 结束颜色)/* 等同于 */linear-gradient(to bottom, 开始颜色, 结束颜色)2. 色标位置/* 明确指定颜色位置 */linear-gradient(180deg, #6743ff 0%, #342bda 100%)/* 0%是起点100%是终点中间自动过渡 */完整代码!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0link relicon typeimage/png sizes32x32 href./assets/images/favicon-32x32.pngtitleFrontend Mentor | Results summary component/titlestyle/* 全局重置移除默认边距使用更直观的盒模型 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 页面主体柔和背景使用flex居中卡片系统字体保证一致性 */body {background-color: #ecf3ff;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;font-family: system-ui, sans-serif;}/* 主卡片容器宽高固定白色背景圆角阴影flex左右布局 */.box {width: 738px;height: 512px;background-color: #fff;display: flex;border-radius: 30px;overflow: hidden; /* 保证圆角裁掉子元素溢出部分 */box-shadow: 0 20px 30px rgba(0,0,0,0.1);}/* ---------- 左侧蓝色渐变区域Your Result ---------- */.left {width: 50%;background: linear-gradient(180deg, #6743ff 0%, #342bda 100%);color: #fff;padding: 0 30px;display: flex;flex-direction: column;align-items: center;}/* 左上 Your Result 标题 */.left .r1 {margin-top: 40px;margin-bottom: 31px;text-align: center;color: #c5c4f9; /* 柔和的淡紫色 */font-size: 1.5rem;font-weight: 500;}/* 圆形分数区域76 / 100 的容器 */.left .r2 {width: 180px;height: 180px;margin: 0 auto 30px;border-radius: 50%;background: linear-gradient(180deg, #4c25c9 0%, #4732e0 100%); /* 更深的内圈渐变 */display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;font-size: 4rem; /* 主数字76较大 */font-weight: 700;line-height: 1;}/* of 100 小字样式 */.left .r2 span {font-size: 0.9rem;color: #b1a9ff;font-weight: 400;display: block;margin-top: 5px;}/* Great 评级 */.left .r3 {margin-bottom: 20px;text-align: center;font-size: 2rem;font-weight: 700;}/* 描述文本比65%的人得分高 */.left .r4 {text-align: center;line-height: 1.5;color: #c5c4f9;font-size: 1rem;max-width: 220px; /* 控制换行保持美观 */}/* ---------- 右侧白色区域Summary ---------- */.right {width: 50%;margin: 40px;}/* Summary 标题 */.right .l1 {margin-bottom: 28px;color: #2b2f3b;font-weight: 700;font-size: 1.5rem;padding-left: 40px; /* 与下方卡片左对齐 */}/* 统一各个分数条块的容器样式共用flex布局 */.tab, .tab2, .tab3, .tab4 {width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 16px 20px;border-radius: 10px;margin-bottom: 16px;font-weight: 600;}/* Visual 条目里的文字颜色覆盖默认—— 这里仅示例实际由.l5控制 */.tab4 .l5 {color: #1124b0;}/* 左侧分类名称的颜色 */.l2 { color: #ff5555; } /* Reaction 红色 */.l3 { color: #ffb21e; } /* Memory 橙色/黄色 */.l4 { color: #00bb8f; } /* Verbal 绿色 */.l5 { color: #1124b0; } /* Visual 深蓝色 *//* 右侧分数如 80 / 100的基础样式 */.w1 {color: #2b2f3b;}.w1 b {font-weight: 700; /* 加粗数字部分但保留斜杠后普通粗细 */}/* 四个分类的不同背景色 */.tab { background-color: #fff6f5; } /* Reaction - 浅红背景 */.tab2 { background-color: #fffbf0; } /* Memory - 浅黄背景 */.tab3 { background-color: #f2fcf9; } /* Verbal - 浅绿背景 */.tab4 { background-color: #f3f3fd; } /* Visual - 浅紫背景 *//* Continue 按钮样式 */.tab5 {width: 100%;display: flex;justify-content: center;align-items: center;padding: 17px;background-color: #303b59; /* 深蓝紫色 */border-radius: 40px;color: #fff;font-weight: 600;font-size: 1.1rem;border: none; /* 移除默认边框 */cursor: pointer;transition: background 0.2s; /* 平滑过渡 */margin-top: 40px; /* 与上方最后一个条目间隔 */}/* 悬停时渐变效果模拟左侧背景 */.tab5:hover {background: linear-gradient(180deg, #6743ff 0%, #342bda 100%);}/style/headbody!-- 主要组件卡片 --div classbox!-- 左侧结果区域 --div classleft!-- 第一行Your Result --div classr1Your Result/div!-- 大圆形分数76 / 100 --div classr276spanof 100/span/div!-- 评级Great --div classr3Great/div!-- 详细说明超过65%的参与者 --div classr4You scored higher than 65% of the people who have taken these tests./div/div!-- 右侧摘要区域 --div classright!-- 标题Summary --div classl1Summary/div!-- Reaction 条目使用浅红色背景 .tab 和红色文字 .l2 --div classtabdiv classl2Reaction/divdiv classw1b80/b / 100/div/div!-- Memory 条目浅黄背景 .tab2 和橙色文字 .l3 --div classtab2div classl3Memory/divdiv classw1b92/b / 100/div/div!-- Verbal 条目浅绿背景 .tab3 和绿色文字 .l4 --div classtab3div classl4Verbal/divdiv classw1b61/b / 100/div/div!-- Visual 条目浅紫背景 .tab4 和深蓝色文字 .l5 --div classtab4div classl5Visual/divdiv classw1b72/b / 100/div/div!-- Continue 按钮无边框悬停渐变 --div classtab5Continue/div/div/div/body/html