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

前端布局小练习：Results Summary

news 2026/5/12 0:08:01

一、整体架构设计
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 html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<title>Frontend Mentor | Results summary component</title>
<style>
/* 全局重置：移除默认边距，使用更直观的盒模型 */
* {
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>
</head>
<body>

<div class="box">

<div class="left">

<div class="r1">Your Result</div>

<div class="r2">
76
<span>of 100</span>
</div>

<div class="r3">Great</div>

<div class="r4">You scored higher than 65% of the people who have taken these tests.</div>
</div>