样式对比页面
本页面展示了网站不同页面中使用的各种标题和内容样式，方便比较和选择统一的样式方案。通过查看本页面，您可以直观地看到各页面之间的样式差异，并帮助确定最终的统一样式规范。
H2标题样式比较
首页 (index.css) - .profile-content h2
首页标题样式示例
这是一个示例段落，展示与首页标题样式的搭配效果。
.profile-content h2 {
font-size: 2rem;
margin-bottom: 15px;
color: #00a4ff;
position: relative;
display: inline-block;
}
.profile-content h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #00a4ff 0%, #0072ff 100%);
}
工具和游戏页面 (tools.css) - #tools-section h2, #games-section h2
工具页面标题样式示例
这是一个示例段落，展示与工具页面标题样式的搭配效果。
#tools-section h2,
#games-section h2 {
color: var(--primary-color);
margin-top: 2rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--accent-color);
}
体育运动页面 (sports.css) - section h2
体育页面标题样式示例
这是一个示例段落，展示与体育页面标题样式的搭配效果。
section h2 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
color: #333;
position: relative;
padding-bottom: 0.8rem;
}
section h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: #333;
}
配速计算器 (pace-calculator.css) - .pace-calculator-container h2
计算器页面标题样式示例
这是一个示例段落，展示与计算器页面标题样式的搭配效果。
.pace-calculator-container h2 {
color: #333;
text-align: center;
margin-bottom: 20px;
font-size: 28px;
font-weight: 600;
border-bottom: 2px solid #dee2e6;
padding-bottom: 10px;
}
H3标题样式比较
首页 (index.css) - .strava-connect h3
首页Strava模块H3样式
这是一个示例段落，展示与首页Strava模块H3样式的搭配效果。
.strava-connect h3 {
color: #FC4C02;
margin-bottom: 15px;
font-weight: 600;
}
工具页面 (tools.css) - .tool-card-content h3, .game-card-content h3
工具/游戏卡片H3样式
这是一个示例段落，展示与工具/游戏卡片H3样式的搭配效果。
.tool-card-content h3,
.game-card-content h3 {
margin-top: 0;
margin-bottom: 0.75rem;
color: var(--heading-color);
font-size: 1.25rem;
}
配速计算器 (pace-calculator.css) - .result-area h3
计算器结果区域H3样式
这是一个示例段落，展示与计算器结果区域H3样式的搭配效果。
.result-area h3 {
color: #333;
margin-bottom: 15px;
font-size: 20px;
font-weight: 600;
}
其他元素样式对比
配速计算器结果项样式
结果项标题
这是一个结果项的内容示例，带有左侧边框标识。
.result-item {
padding: 15px;
background-color: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #007bff;
}
样式统一建议
关于标题样式
- 建议选择一种H2样式作为全站统一标准，推荐首页或体育页面的样式
- 所有页面的H1、H2、H3标题应有清晰的视觉层次关系
- 可以保留特定模块的特殊样式（如Strava的橙色标题）作为强调
关于CSS管理
- 建议在common.css中定义基础标题样式和通用变量
- 在各页面特定CSS中仅添加必要的页面特定样式，避免重复定义
- 使用CSS变量统一管理颜色、字体大小等属性，便于后期维护
关于间距和布局
- 所有标题样式应保持一致的视觉层次和间距规范
- 段落文本与标题之间的间距应统一
- 各section之间的间距也应保持一致
提示：
选择样式后，可以在common.css中定义统一的标题样式，然后修改各个页面的CSS文件，移除重复的样式定义，只保留必要的页面特定样式。