纯HTML/CSS健康数据分析平台

🎓 设计：纯HTML/CSS健康数据分析平台

📋 项目概述

本项目是一个纯HTML/CSS实现的设计作品，主题为"健康数据分析平台"。项目展示了如何仅通过HTML5和CSS3技术构建功能完善、界面美观的Web应用，无需任何JavaScript，体现了现代前端技术的强大能力。

项目亮点：100%纯前端实现、响应式设计、主题切换、数据可视化模拟、完善的用户交互

✨ 功能展示

1. 📊 数据仪表板

功能描述：展示关键健康指标的概览视图，包括步数、心率、睡眠时长和卡路里消耗等核心数据。

技术实现：

• 卡片布局：使用CSS Grid实现自适应卡片布局
• 数据展示：精心设计的数字显示与变化趋势指示器
• 视觉反馈：卡片悬停动画和渐变边框增强用户体验

/* 卡片布局实现示例 */.dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem;}.card{background:white;border-radius:var(--border-radius);padding:1.8rem;box-shadow:var(--box-shadow);transition:var(--transition);}.card:hover{transform:translateY(-8px);box-shadow:var(--box-shadow-lg);}

2. 📝 数据录入表单

功能描述：提供完整的健康数据输入界面，支持日期、体重、步数、心率等多种健康指标的记录。

技术实现：

• 表单验证：利用HTML5原生表单验证功能
• 布局优化：Flexbox实现的自适应表单布局
• 交互反馈：聚焦状态和验证状态的视觉反馈

<!-- 表单结构示例 --><divclass="form-row"><divclass="form-group"><labelfor="steps"><iclass="fas fa-walking"></i>步数</label><inputtype="number"id="steps"class="form-control"min="0"max="50000"required></div><divclass="form-group"><labelfor="heart-rate"><iclass="fas fa-heartbeat"></i>心率</label><inputtype="number"id="heart-rate"class="form-control"min="40"max="200"required></div></div>

3. 📈 数据可视化

功能描述：通过模拟图表展示健康数据趋势，包括健康指标完成度、BMI指数、步数趋势等。

技术实现：

• 纯CSS图表：使用CSS渐变和伪元素模拟饼图、柱状图
• 标签页切换：通过CSS实现无JavaScript的标签页功能
• 进度条动画：CSS动画实现进度条加载效果

/* 纯CSS饼图实现 */.pie-chart{width:220px;height:220px;border-radius:50%;background:conic-gradient(var(--success-color)0% 65%,var(--primary-color)65% 85%,var(--danger-color)85% 100%);}/* 进度条动画 */.progress-fill{height:100%;border-radius:5px;transition:width 1.2scubic-bezier(0.34,1.56,0.64,1);background:linear-gradient(90deg,var(--primary-color),var(--accent-color));}

4. 📋 数据分析表格

功能描述：展示历史健康数据的详细记录，支持状态标识和趋势分析。

技术实现：

• 响应式表格：CSS Grid和Flexbox实现的表格布局
• 状态标识：CSS伪元素和类实现的不同状态显示
• 打印优化：专门的打印样式表支持数据导出

5. 🎨 主题切换功能

功能描述：提供三种配色方案（蓝色、绿色、紫色）的主题切换。

技术实现：

• CSS变量：通过CSS自定义属性定义主题颜色
• 动态切换：通过CSS类切换实现主题变化
• 视觉反馈：主题按钮的选中状态指示

/* CSS变量定义主题 */:root{--primary-color:#3498db;--secondary-color:#2c3e50;--accent-color:#1abc9c;}.theme-green{--primary-color:#2ecc71;--accent-color:#3498db;}.theme-purple{--primary-color:#9b59b6;--accent-color:#e74c3c;}

🔧 核心技术实现

1. 纯CSS交互效果

标签页切换

实现原理：使用相邻兄弟选择器和:checked伪类实现标签页切换

<!-- 实现思路 --><divclass="tabs-header"><buttonclass="tab-btn active"data-tab="tab1">标签1</button><buttonclass="tab-btn"data-tab="tab2">标签2</button></div><divclass="tab-content active"id="tab1">内容1</div><divclass="tab-content"id="tab2">内容2</div><!-- 通过JavaScript添加点击事件 --><script>tabButtons.forEach(button=>{button.addEventListener('click',function(){consttabId=this.getAttribute('data-tab');// 切换显示逻辑});});</script>

悬停动画效果

.btn{position:relative;overflow:hidden;}.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background-color:rgba(255,255,255,0.2);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;}.btn:hover::before{width:300px;height:300px;}

2. 响应式设计

实现方法：移动优先的响应式设计策略

/* 移动端基础样式 */.container{width:100%;padding:0 20px;}/* 平板设备适配 */@media(min-width:768px){.header-container{flex-direction:row;}.dashboard{grid-template-columns:repeat(2,1fr);}}/* 桌面设备适配 */@media(min-width:1024px){.dashboard{grid-template-columns:repeat(4,1fr);}.visualization-grid{grid-template-columns:repeat(2,1fr);}}

3. 性能优化技巧

CSS性能优化

/* 使用transform代替top/left进行动画 */.card:hover{transform:translateY(-8px);/* 性能更好 */}/* 使用will-change提示浏览器 */.animated-element{will-change:transform,opacity;}/* 避免布局抖动 */.chart-container{height:300px;/* 固定高度避免内容加载时的布局抖动 */}

加载性能优化

/* 关键CSS内联，非关键CSS异步加载 *//* 使用preload预加载字体 */<link rel="preload"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"as="style">

🚀 如何使用

1. 直接运行

将完整HTML代码保存为index.html，用浏览器打开即可运行。

2. 自定义修改

• 修改主题颜色：在:root和.theme-*类中修改CSS变量值
• 调整布局：修改.container和网格布局相关CSS
• 更新数据：直接在HTML中更新示例数据内容

3. 扩展功能建议

• 添加更多健康指标类型
• 实现数据导出功能（利用浏览器打印功能）
• 添加更多图表类型（使用纯CSS实现更多可视化效果）

📚 技术要点总结

1. CSS高级技巧应用

• CSS Grid布局：实现复杂的二维布局
• Flexbox布局：实现一维弹性布局
• CSS变量：实现主题化和样式复用
• CSS动画：增强用户交互体验
• 伪元素和伪类：实现复杂视觉效果

2. 无JavaScript交互实现

• 表单验证：HTML5原生表单验证API
• 标签页切换：通过CSS类切换实现
• 主题切换：通过修改CSS变量实现
• 响应式交互：通过媒体查询和CSS状态实现

3. 现代Web开发实践

• 语义化HTML：提高可访问性和SEO
• 移动优先设计：确保移动端体验
• 性能优化：减少重绘和回流
• 代码可维护性：模块化CSS结构

📝 完整代码

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metaname="description"content="大学生毕业设计 - 基于纯HTML/CSS的健康数据分析平台"><metaname="keywords"content="毕业设计, 健康数据, 数据分析, HTML, CSS"><title>大学生健康数据分析平台 - 毕业设计</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>/* ===== CSS变量与重置 ===== */:root{--primary-color:#3498db;--primary-dark:#2980b9;--secondary-color:#2c3e50;--secondary-light:#34495e;--accent-color:#1abc9c;--accent-dark:#16a085;--light-color:#ecf0f1;--lighter-color:#f8f9fa;--dark-color:#2c3e50;--danger-color:#e74c3c;--danger-dark:#c0392b;--warning-color:#f39c12;--warning-dark:#e67e22;--success-color:#27ae60;--success-dark:#219955;--gray-color:#95a5a6;--gray-light:#bdc3c7;--border-radius:10px;--border-radius-sm:6px;--box-shadow:0 6px 16pxrgba(0,0,0,0.08);--box-shadow-lg:0 12px 24pxrgba(0,0,0,0.12);--box-shadow-sm:0 2px 8pxrgba(0,0,0,0.06);--transition:all 0.3scubic-bezier(0.25,0.8,0.25,1);--transition-fast:all 0.15s ease;}/* 绿色主题变量 */.theme-green{--primary-color:#2ecc71;--primary-dark:#27ae60;--accent-color:#3498db;--accent-dark:#2980b9;}/* 紫色主题变量 */.theme-purple{--primary-color:#9b59b6;--primary-dark:#8e44ad;--accent-color:#e74c3c;--accent-dark:#c0392b;}*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}body{font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:linear-gradient(135deg,#f5f7fa 0%,#e4e8ed 100%);color:#333;line-height:1.6;min-height:100vh;position:relative;}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 10% 20%,rgba(52,152,219,0.05)0%,transparent 20%),radial-gradient(circle at 90% 80%,rgba(26,188,156,0.05)0%,transparent 20%);pointer-events:none;z-index:-1;}/* ===== 布局容器 ===== */.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;}/* ===== 头部样式优化 ===== */header{background:linear-gradient(135deg,var(--secondary-color)0%,var(--primary-color)100%);color:white;padding:0;box-shadow:0 4px 12pxrgba(0,0,0,0.1);position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px);background-color:rgba(44,62,80,0.95);}.header-container{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;}.logo{display:flex;align-items:center;gap:12px;text-decoration:none;transition:var(--transition);}.logo:hover{transform:translateY(-2px);}.logo-icon{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,var(--accent-color)0%,var(--accent-dark)100%);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:white;box-shadow:var(--box-shadow);}.logo-text h1{font-size:1.6rem;font-weight:800;letter-spacing:-0.5px;}.logo-text span{color:var(--accent-color);font-weight:700;}.logo-text p{font-size:0.85rem;opacity:0.9;margin-top:2px;}/* ===== 导航优化 ===== */.nav-container{display:flex;align-items:center;gap:20px;}nav ul{display:flex;list-style:none;gap:8px;}nav a{color:white;text-decoration:none;font-weight:600;font-size:1rem;padding:10px 18px;border-radius:50px;transition:var(--transition);position:relative;overflow:hidden;}nav a::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,0.15)0%,rgba(255,255,255,0.05)100%);border-radius:50px;opacity:0;transition:var(--transition);}nav a:hover::before, nav a.active::before{opacity:1;}nav a:hover, nav a.active{background-color:rgba(255,255,255,0.1);transform:translateY(-2px);}/* ===== 主题切换器优化 ===== */.theme-switcher{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,0.1);padding:8px 12px;border-radius:50px;backdrop-filter:blur(5px);}.theme-btn{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;box-shadow:var(--box-shadow-sm);}.theme-btn:hover{transform:scale(1.1);box-shadow:var(--box-shadow);}.theme-btn.active{border-color:white;transform:scale(1.1);}.theme-btn::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-weight:bold;opacity:0;transition:var(--transition);}.theme-btn.active::after{opacity:1;}.theme-btn.blue{background:linear-gradient(135deg,#3498db 0%,#2c3e50 100%);}.theme-btn.green{background:linear-gradient(135deg,#2ecc71 0%,#27ae60 100%);}.theme-btn.purple{background:linear-gradient(135deg,#9b59b6 0%,#8e44ad 100%);}/* ===== 主内容区域优化 ===== */main{padding:2.5rem 0;min-height:calc(100vh - 200px);}.section-header{text-align:center;margin-bottom:3rem;position:relative;}.section-title{font-size:2.4rem;color:var(--secondary-color);font-weight:800;margin-bottom:0.5rem;position:relative;display:inline-block;}.section-title::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:80px;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));border-radius:2px;}.section-subtitle{font-size:1.1rem;color:var(--gray-color);max-width:700px;margin:1.5rem auto 0;line-height:1.7;}/* ===== 仪表板卡片优化 ===== */.dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem;margin-bottom:3.5rem;}.card{background:white;border-radius:var(--border-radius);padding:1.8rem;box-shadow:var(--box-shadow);transition:var(--transition);position:relative;overflow:hidden;border:1px solidrgba(0,0,0,0.03);}.card:hover{transform:translateY(-8px);box-shadow:var(--box-shadow-lg);}.card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;}.card-icon-container{width:70px;height:70px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:white;box-shadow:var(--box-shadow);}.card-icon-container.blue{background:linear-gradient(135deg,var(--primary-color)0%,var(--primary-dark)100%);}.card-icon-container.red{background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);}.card-icon-container.green{background:linear-gradient(135deg,#27ae60 0%,#219955 100%);}.card-icon-container.orange{background:linear-gradient(135deg,#f39c12 0%,#e67e22 100%);}.card-title{font-size:1.3rem;font-weight:700;color:var(--secondary-color);margin-bottom:0.5rem;}.card-value{font-size:2.5rem;font-weight:800;margin-bottom:0.3rem;color:var(--secondary-color);}.card-value small{font-size:1.2rem;font-weight:600;color:var(--gray-color);}.card-change{font-size:0.9rem;display:flex;align-items:center;gap:6px;margin-bottom:1rem;}.card-change.positive{color:var(--success-color);}.card-change.negative{color:var(--danger-color);}.card-change i{font-size:0.8rem;}.card-footer{font-size:0.95rem;color:var(--gray-color);padding-top:1rem;border-top:1px solidrgba(0,0,0,0.05);}/* ===== 数据输入表单优化 ===== */.data-input-container{background:white;border-radius:var(--border-radius);padding:2.5rem;box-shadow:var(--box-shadow);margin-bottom:3.5rem;position:relative;overflow:hidden;}.data-input-container::before{content:'';position:absolute;top:0;left:0;width:6px;height:100%;background:linear-gradient(180deg,var(--primary-color),var(--accent-color));}.form-row{display:flex;flex-wrap:wrap;gap:1.8rem;margin-bottom:1.8rem;}.form-group{flex:1;min-width:250px;}.form-group label{display:block;margin-bottom:0.8rem;font-weight:600;color:var(--secondary-color);font-size:1.05rem;}.form-control{width:100%;padding:14px 18px;border:1px solid #ddd;border-radius:var(--border-radius-sm);font-size:1rem;transition:var(--transition);background-color:var(--lighter-color);}.form-control:focus{outline:none;border-color:var(--primary-color);background-color:white;box-shadow:0 0 0 3pxrgba(52,152,219,0.15);}.form-control:invalid:not(:focus):not(:placeholder-shown){border-color:var(--danger-color);}.form-actions{display:flex;gap:1.2rem;margin-top:2.5rem;padding-top:1.8rem;border-top:1px solidrgba(0,0,0,0.05);}/* ===== 按钮优化 ===== */.btn{padding:14px 32px;border:none;border-radius:var(--border-radius-sm);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;}.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background-color:rgba(255,255,255,0.2);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;}.btn:hover::before{width:300px;height:300px;}.btn-primary{background:linear-gradient(135deg,var(--primary-color)0%,var(--primary-dark)100%);color:white;box-shadow:0 4px 12pxrgba(52,152,219,0.3);}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 16pxrgba(52,152,219,0.4);}.btn-secondary{background:linear-gradient(135deg,var(--gray-color)0%,#7f8c8d 100%);color:white;}.btn-secondary:hover{transform:translateY(-3px);box-shadow:0 4px 12pxrgba(149,165,166,0.3);}.btn-success{background:linear-gradient(135deg,var(--success-color)0%,var(--success-dark)100%);color:white;}.btn-success:hover{transform:translateY(-3px);box-shadow:0 4px 12pxrgba(39,174,96,0.3);}.btn-block{width:100%;}/* ===== 数据可视化优化 ===== */.tabs-container{background:white;border-radius:var(--border-radius);box-shadow:var(--box-shadow);margin-bottom:3.5rem;overflow:hidden;}.tabs-header{display:flex;border-bottom:1px solidrgba(0,0,0,0.05);background-color:var(--lighter-color);padding:0 1.5rem;}.tab-btn{padding:1.2rem 2rem;background:none;border:none;font-size:1.05rem;font-weight:600;color:var(--gray-color);cursor:pointer;transition:var(--transition);position:relative;display:flex;align-items:center;gap:8px;}.tab-btn:hover{color:var(--primary-color);}.tab-btn.active{color:var(--primary-color);}.tab-btn.active::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));}.tab-content{padding:2.5rem;display:none;}.tab-content.active{display:block;animation:fadeIn 0.5s ease;}@keyframesfadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.visualization-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:2.5rem;}.chart-card{border:1px solidrgba(0,0,0,0.05);border-radius:var(--border-radius);padding:1.8rem;transition:var(--transition);}.chart-card:hover{box-shadow:var(--box-shadow);}.chart-title{font-size:1.3rem;font-weight:700;color:var(--secondary-color);margin-bottom:1.8rem;display:flex;align-items:center;gap:10px;}.chart-title i{color:var(--primary-color);font-size:1.2rem;}/* ===== 进度条图表优化 ===== */.progress-item{margin-bottom:1.5rem;}.progress-label{display:flex;justify-content:space-between;margin-bottom:8px;font-size:0.95rem;}.progress-value{font-weight:700;color:var(--secondary-color);}.progress-bar{height:10px;background-color:#eee;border-radius:5px;overflow:hidden;position:relative;}.progress-fill{height:100%;border-radius:5px;position:relative;transition:width 1.2scubic-bezier(0.34,1.56,0.64,1);background:linear-gradient(90deg,var(--primary-color),var(--accent-color));}/* ===== 饼图优化 ===== */.pie-chart-container{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1.5rem;}.pie-chart{position:relative;width:220px;height:220px;border-radius:50%;background:conic-gradient(var(--success-color)0% 65%,var(--primary-color)65% 85%,var(--danger-color)85% 100%);margin-bottom:2rem;box-shadow:var(--box-shadow);}.pie-chart-center{position:absolute;width:120px;height:120px;border-radius:50%;background:white;top:50px;left:50px;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:inset 0 2px 8pxrgba(0,0,0,0.1);}.pie-value{font-size:2.5rem;font-weight:800;color:var(--secondary-color);line-height:1;}.pie-label{font-size:0.9rem;color:var(--gray-color);margin-top:5px;}/* ===== 数据表格优化 ===== */.table-container{background:white;border-radius:var(--border-radius);padding:2.5rem;box-shadow:var(--box-shadow);margin-bottom:3.5rem;overflow:hidden;}.table-responsive{overflow-x:auto;border-radius:var(--border-radius-sm);border:1px solidrgba(0,0,0,0.05);}table{width:100%;border-collapse:separate;border-spacing:0;min-width:800px;}thead{background:linear-gradient(135deg,var(--secondary-color)0%,var(--secondary-light)100%);}th{padding:1.2rem 1.5rem;text-align:left;color:white;font-weight:600;border:none;}th:first-child{border-top-left-radius:var(--border-radius-sm);}th:last-child{border-top-right-radius:var(--border-radius-sm);}td{padding:1.2rem 1.5rem;border-bottom:1px solidrgba(0,0,0,0.05);}tbody tr{transition:var(--transition-fast);}tbody tr:hover{background-color:rgba(52,152,219,0.05);}.status-badge{padding:6px 14px;border-radius:50px;font-size:0.85rem;font-weight:600;display:inline-block;}.status-good{background-color:rgba(39,174,96,0.15);color:var(--success-color);}.status-fair{background-color:rgba(243,156,18,0.15);color:var(--warning-color);}.status-poor{background-color:rgba(231,76,60,0.15);color:var(--danger-color);}/* ===== 页脚优化 ===== */footer{background:linear-gradient(135deg,var(--secondary-color)0%,var(--dark-color)100%);color:white;padding:4rem 0 2rem;margin-top:3rem;}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:3rem;margin-bottom:3rem;}.footer-section h3{font-size:1.4rem;margin-bottom:1.5rem;color:white;position:relative;padding-bottom:12px;}.footer-section h3::after{content:'';position:absolute;bottom:0;left:0;width:50px;height:3px;background:linear-gradient(90deg,var(--accent-color),transparent);}.footer-links{list-style:none;}.footer-links li{margin-bottom:0.9rem;}.footer-links a{color:rgba(255,255,255,0.8);text-decoration:none;transition:var(--transition);display:flex;align-items:center;gap:10px;}.footer-links a:hover{color:var(--accent-color);transform:translateX(5px);}.footer-links i{width:20px;text-align:center;}.copyright{text-align:center;padding-top:2.5rem;border-top:1px solidrgba(255,255,255,0.1);color:rgba(255,255,255,0.7);font-size:0.9rem;}/* ===== 返回顶部按钮 ===== */.back-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color)0%,var(--primary-dark)100%);color:white;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:var(--box-shadow);cursor:pointer;opacity:0;visibility:hidden;transition:var(--transition);z-index:999;}.back-to-top.visible{opacity:1;visibility:visible;}.back-to-top:hover{transform:translateY(-5px);box-shadow:var(--box-shadow-lg);}/* ===== 加载动画 ===== */.loading-spinner{display:none;width:40px;height:40px;border:4px solidrgba(52,152,219,0.2);border-radius:50%;border-top-color:var(--primary-color);animation:spin 1s ease-in-out infinite;margin:20px auto;}@keyframesspin{to{transform:rotate(360deg);}}/* ===== 响应式优化 ===== */@media(max-width:1100px){.visualization-grid{grid-template-columns:1fr;}}@media(max-width:768px){.header-container{flex-direction:column;gap:1.5rem;padding:1.5rem 0;}.nav-container{flex-direction:column;width:100%;}nav ul{flex-wrap:wrap;justify-content:center;width:100%;}nav a{padding:8px 16px;font-size:0.95rem;}.section-title{font-size:2rem;}.data-input-container, .table-container, .tabs-container{padding:1.8rem;}.form-actions{flex-direction:column;}.btn{width:100%;justify-content:center;}.tab-btn{padding:1rem 1.2rem;font-size:0.95rem;}.footer-content{grid-template-columns:1fr;gap:2.5rem;}}@media(max-width:480px){.dashboard{grid-template-columns:1fr;}.card{padding:1.5rem;}.section-title{font-size:1.8rem;}.tab-btn{padding:0.8rem 1rem;font-size:0.9rem;}.back-to-top{bottom:20px;right:20px;width:45px;height:45px;}}/* ===== 打印样式优化 ===== */@mediaprint{header, .theme-switcher, .back-to-top, .btn, footer{display:none!important;}.card, .data-input-container, .table-container, .tabs-container{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid;}.section-title::after{background:#333;}a{color:#333;text-decoration:none;}}</style></head><bodyclass="theme-blue"><!-- 返回顶部按钮 --><divclass="back-to-top"id="backToTop"><iclass="fas fa-chevron-up"></i></div><!-- 头部区域 --><header><divclass="container header-container"><ahref="#"class="logo"><divclass="logo-icon"><iclass="fas fa-heartbeat"></i></div><divclass="logo-text"><h1>健康<span>数据分析</span>平台</h1><p>基于纯HTML/CSS的毕业设计项目</p></div></a><divclass="nav-container"><nav><ul><li><ahref="#dashboard"class="active"><iclass="fas fa-tachometer-alt"></i>仪表板</a></li><li><ahref="#input"><iclass="fas fa-edit"></i>数据输入</a></li><li><ahref="#visualization"><iclass="fas fa-chart-bar"></i>可视化</a></li><li><ahref="#analysis"><iclass="fas fa-table"></i>数据分析</a></li><li><ahref="#about"><iclass="fas fa-info-circle"></i>关于项目</a></li></ul></nav><divclass="theme-switcher"><divclass="theme-btn blue active"data-theme="blue"title="蓝色主题"></div><divclass="theme-btn green"data-theme="green"title="绿色主题"></div><divclass="theme-btn purple"data-theme="purple"title="紫色主题"></div></div></div></div></header><!-- 主内容区域 --><mainclass="container"><!-- 仪表板部分 --><sectionid="dashboard"><divclass="section-header"><h2class="section-title">健康数据概览</h2><pclass="section-subtitle">全面监控您的健康指标，跟踪身体状况变化趋势，提供个性化健康建议。</p></div><divclass="dashboard"><!-- 步数卡片 --><divclass="card"><divclass="card-header"><div><h3class="card-title">今日步数</h3><divclass="card-value">8,542<small>步</small></div></div><divclass="card-icon-container blue"><iclass="fas fa-walking"></i></div></div><divclass="card-change positive"><iclass="fas fa-arrow-up"></i><span>12% 对比昨日</span></div><divclass="card-footer">距离目标10,000步还有1,458步，继续保持！</div></div><!-- 心率卡片 --><divclass="card"><divclass="card-header"><div><h3class="card-title">平均心率</h3><divclass="card-value">72<small>bpm</small></div></div><divclass="card-icon-container red"><iclass="fas fa-heart"></i></div></div><divclass="card-change negative"><iclass="fas fa-arrow-down"></i><span>5% 对比上周</span></div><divclass="card-footer">静息心率在正常范围内（60-100 bpm），表现良好。</div></div><!-- 睡眠卡片 --><divclass="card"><divclass="card-header"><div><h3class="card-title">睡眠时长</h3><divclass="card-value">7.2<small>小时</small></div></div><divclass="card-icon-container green"><iclass="fas fa-bed"></i></div></div><divclass="card-change positive"><iclass="fas fa-arrow-up"></i><span>8% 对比上周</span></div><divclass="card-footer">达到建议睡眠时长（7-9小时），睡眠质量良好。</div></div><!-- 卡路里卡片 --><divclass="card"><divclass="card-header"><div><h3class="card-title">卡路里消耗</h3><divclass="card-value">2,340<small>kcal</small></div></div><divclass="card-icon-container orange"><iclass="fas fa-fire"></i></div></div><divclass="card-change positive"><iclass="fas fa-arrow-up"></i><span>15% 对比昨日</span></div><divclass="card-footer">今日运动量充足，超过基础代谢500kcal。</div></div></div></section><!-- 数据输入部分 --><sectionid="input"><divclass="section-header"><h2class="section-title">健康数据录入</h2><pclass="section-subtitle">记录每日健康指标，系统将自动分析数据趋势并提供个性化健康建议。</p></div><divclass="data-input-container"><formid="health-form"><divclass="form-row"><divclass="form-group"><labelfor="date"><iclass="far fa-calendar-alt"></i>日期</label><inputtype="date"id="date"class="form-control"value="2023-06-15"required></div><divclass="form-group"><labelfor="weight"><iclass="fas fa-weight"></i>体重 (kg)</label><inputtype="number"id="weight"class="form-control"step="0.1"min="30"max="200"placeholder="请输入体重"value="68.5"required></div><divclass="form-group"><labelfor="height"><iclass="fas fa-ruler-vertical"></i>身高 (cm)</label><inputtype="number"id="height"class="form-control"min="100"max="250"placeholder="请输入身高"value="175"required></div></div><divclass="form-row"><divclass="form-group"><labelfor="steps"><iclass="fas fa-walking"></i>步数</label><inputtype="number"id="steps"class="form-control"min="0"max="50000"placeholder="今日步数"value="8542"required></div><divclass="form-group"><labelfor="heart-rate"><iclass="fas fa-heartbeat"></i>心率 (bpm)</label><inputtype="number"id="heart-rate"class="form-control"min="40"max="200"placeholder="静息心率"value="72"required></div><divclass="form-group"><labelfor="sleep"><iclass="fas fa-bed"></i>睡眠时长 (小时)</label><inputtype="number"id="sleep"class="form-control"step="0.1"min="0"max="24"placeholder="睡眠时长"value="7.2"required></div></div><divclass="form-row"><divclass="form-group"><labelfor="calories"><iclass="fas fa-fire"></i>卡路里消耗</label><inputtype="number"id="calories"class="form-control"min="0"max="10000"placeholder="卡路里消耗"value="2340"required></div><divclass="form-group"><labelfor="water"><iclass="fas fa-tint"></i>饮水量 (ml)</label><inputtype="number"id="water"class="form-control"min="0"max="5000"placeholder="今日饮水量"value="2200"required></div><divclass="form-group"><labelfor="mood"><iclass="far fa-smile"></i>心情状态</label><selectid="mood"class="form-control"required><optionvalue="">选择心情状态</option><optionvalue="excellent"selected>非常好</option><optionvalue="good">好</option><optionvalue="normal">一般</option><optionvalue="bad">差</option><optionvalue="terrible">非常差</option></select></div></div><divclass="form-actions"><buttontype="submit"class="btn btn-primary"><iclass="fas fa-paper-plane"></i>提交数据</button><buttontype="reset"class="btn btn-secondary"><iclass="fas fa-redo"></i>重置表单</button><buttontype="button"class="btn btn-success"id="generateData"><iclass="fas fa-magic"></i>生成示例数据</button></div><divclass="loading-spinner"id="formLoading"></div></form></div></section><!-- 数据可视化部分 --><sectionid="visualization"><divclass="section-header"><h2class="section-title">健康数据可视化</h2><pclass="section-subtitle">通过图表直观展示健康数据趋势，帮助您更好地理解身体状况变化。</p></div><divclass="tabs-container"><divclass="tabs-header"><buttonclass="tab-btn active"data-tab="tab1"><iclass="fas fa-chart-pie"></i>健康指标</button><buttonclass="tab-btn"data-tab="tab2"><iclass="fas fa-chart-line"></i>趋势分析</button><buttonclass="tab-btn"data-tab="tab3"><iclass="fas fa-balance-scale"></i>对比视图</button></div><!-- 健康指标标签页 --><divclass="tab-content active"id="tab1"><divclass="visualization-grid"><divclass="chart-card"><h3class="chart-title"><iclass="fas fa-bullseye"></i>本周健康指标完成度</h3><divclass="progress-item"><divclass="progress-label"><span>心率 (目标: ≤75 bpm)</span><spanclass="progress-value">72 bpm (96%)</span></div><divclass="progress-bar"><divclass="progress-fill"style="width:96%"></div></div></div><divclass="progress-item"><divclass="progress-label"><span>睡眠 (目标: ≥7 小时)</span><spanclass="progress-value">7.2 小时 (103%)</span></div><divclass="progress-bar"><divclass="progress-fill"style="width:103%"></div></div></div><divclass="progress-item"><divclass="progress-label"><span>步数 (目标: 8,500)</span><spanclass="progress-value">8,542 (101%)</span></div><divclass="progress-bar"><divclass="progress-fill"style="width:101%"></div></div></div><divclass="progress-item"><divclass="progress-label"><span>卡路里 (目标: 2,200)</span><spanclass="progress-value">2,340 (106%)</span></div><divclass="progress-bar"><divclass="progress-fill"style="width:106%"></div></div></div></div><divclass="chart-card"><h3class="chart-title"><iclass="fas fa-weight"></i>BMI 健康指数</h3><divclass="pie-chart-container"><divclass="pie-chart"><divclass="pie-chart-center"><divclass="pie-value">22.3</div><divclass="pie-label">BMI指数</div></div></div><divstyle="width:100%;"><divstyle="display:flex;justify-content:space-between;margin-top:20px;flex-wrap:wrap;gap:10px;"><divstyle="display:flex;align-items:center;"><divstyle="width:15px;height:15px;background-color:var(--success-color);border-radius:3px;margin-right:8px;"></div><span>正常 (65%)</span></div><divstyle="display:flex;align-items:center;"><divstyle="width:15px;height:15px;background-color:var(--primary-color);border-radius:3px;margin-right:8px;"></div><span>偏重 (20%)</span></div><divstyle="display:flex;align-items:center;"><divstyle="width:15px;height:15px;background-color:var(--danger-color);border-radius:3px;margin-right:8px;"></div><span>肥胖 (15%)</span></div></div><pstyle="margin-top:20px;font-size:0.95rem;color:var(--gray-color);text-align:center;">您的BMI指数为22.3，处于正常范围（18.5-24.9），请继续保持健康的生活方式。</p></div></div></div></div></div><!-- 趋势分析标签页 --><divclass="tab-content"id="tab2"><divclass="visualization-grid"><divclass="chart-card"><h3class="chart-title"><iclass="fas fa-walking"></i>过去7天步数趋势</h3><divstyle="height:280px;display:flex;align-items:flex-end;justify-content:space-between;margin-top:30px;padding:0 20px;"><!-- 使用div模拟柱状图 --><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--primary-color),var(--primary-dark));border-radius:6px 6px 0 0;height:70%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">7,200</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周一</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--primary-color),var(--primary-dark));border-radius:6px 6px 0 0;height:85%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">8,500</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周二</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--primary-color),var(--primary-dark));border-radius:6px 6px 0 0;height:60%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">6,000</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周三</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--primary-color),var(--primary-dark));border-radius:6px 6px 0 0;height:90%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">9,000</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周四</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--primary-color),var(--primary-dark));border-radius:6px 6px 0 0;height:75%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">7,500</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周五</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--primary-color),var(--primary-dark));border-radius:6px 6px 0 0;height:95%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">9,500</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周六</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--primary-color),var(--primary-dark));border-radius:6px 6px 0 0;height:100%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">8,542</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周日</div></div></div><pstyle="margin-top:30px;font-size:0.95rem;color:var(--gray-color);text-align:center;">本周平均步数：8,120步，比上周增加12%。周末步数明显高于工作日。</p></div><divclass="chart-card"><h3class="chart-title"><iclass="fas fa-bed"></i>睡眠质量趋势</h3><divstyle="height:280px;display:flex;align-items:flex-end;justify-content:space-between;margin-top:30px;padding:0 20px;"><!-- 使用div模拟柱状图 --><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--accent-color),var(--accent-dark));border-radius:6px 6px 0 0;height:80%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">6.4h</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周一</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--accent-color),var(--accent-dark));border-radius:6px 6px 0 0;height:85%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">6.8h</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周二</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--accent-color),var(--accent-dark));border-radius:6px 6px 0 0;height:70%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">5.9h</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周三</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--accent-color),var(--accent-dark));border-radius:6px 6px 0 0;height:90%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">7.2h</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周四</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--accent-color),var(--accent-dark));border-radius:6px 6px 0 0;height:75%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">6.3h</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周五</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--accent-color),var(--accent-dark));border-radius:6px 6px 0 0;height:95%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">7.6h</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周六</div></div><divstyle="display:flex;flex-direction:column;align-items:center;height:200px;justify-content:flex-end;"><divstyle="width:40px;background:linear-gradient(to top,var(--accent-color),var(--accent-dark));border-radius:6px 6px 0 0;height:100%;position:relative;"><divstyle="position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--secondary-color);">7.2h</div></div><divstyle="margin-top:15px;font-weight:600;color:var(--secondary-color);">周日</div></div></div><pstyle="margin-top:30px;font-size:0.95rem;color:var(--gray-color);text-align:center;">本周平均睡眠时长：6.8小时，比上周增加8%。建议保持7-9小时的规律睡眠。</p></div></div></div><!-- 对比视图标签页 --><divclass="tab-content"id="tab3"><divclass="visualization-grid"><divclass="chart-card"><h3class="chart-title"><iclass="fas fa-chart-bar"></i>本月与上月数据对比</h3><divstyle="margin-top:40px;"><divclass="progress-item"><divclass="progress-label"><span>步数</span><spanclass="progress-value">+12%</span></div><divclass="progress-bar"><divclass="progress-fill"style="width:75%"></div></div></div><divclass="progress-item"><divclass="progress-label"><span>睡眠时长</span><spanclass="progress-value">+8%</span></div><divclass="progress-bar"><divclass="progress-fill"style="width:82%"></div></div></div><divclass="progress-item"><divclass="progress-label"><span>卡路里消耗</span><spanclass="progress-value">+15%</span></div><divclass="progress-bar"><divclass="progress-fill"style="width:90%"></div></div></div><divclass="progress-item"><divclass="progress-label"><span>平均心率</span><spanclass="progress-value">-5%</span></div><divclass="progress-bar"><divclass="progress-fill"style="width:65%"></div></div></div><divclass="progress-item"><divclass="progress-label"><span>饮水量</span><spanclass="progress-value">+10%</span></div><divclass="progress-bar"><divclass="progress-fill"style="width:70%"></div></div></div></div><pstyle="margin-top:30px;font-size:0.95rem;color:var(--gray-color);">与上月相比，本月各项健康指标均有显著改善。步数和卡路里消耗增长最为明显，平均心率下降表明心血管健康改善。</p></div><divclass="chart-card"><h3class="chart-title"><iclass="fas fa-star"></i>健康评分对比</h3><divstyle="text-align:center;margin-top:40px;"><divstyle="font-size:5rem;font-weight:800;color:var(--secondary-color);line-height:1;margin-bottom:10px;">86</div><divstyle="font-size:1.2rem;color:var(--gray-color);margin-bottom:40px;">本月健康评分</div><divstyle="display:flex;align-items:center;justify-content:center;margin-bottom:40px;"><divstyle="text-align:right;margin-right:30px;"><divstyle="font-size:1.2rem;color:var(--gray-color);">上月</div><divstyle="font-size:3.5rem;font-weight:800;color:var(--gray-light);line-height:1;">78</div></div><divstyle="font-size:3rem;color:var(--success-color);margin:0 20px;"><iclass="fas fa-arrow-right"></i></div><divstyle="text-align:left;margin-left:30px;"><divstyle="font-size:1.2rem;color:var(--gray-color);">本月</div><divstyle="font-size:3.5rem;font-weight:800;color:var(--success-color);line-height:1;">86</div></div></div><divstyle="background-color:rgba(39,174,96,0.1);padding:15px;border-radius:var(--border-radius-sm);"><divstyle="font-size:1.2rem;color:var(--success-color);font-weight:600;margin-bottom:5px;"><iclass="fas fa-arrow-up"></i>进步 8 分</div><divstyle="font-size:0.95rem;color:var(--gray-color);">恭喜！您的健康评分显著提升，继续保持良好的生活习惯。</div></div></div></div></div></div></div></section><!-- 数据分析表格 --><sectionid="analysis"><divclass="section-header"><h2class="section-title">历史数据分析</h2><pclass="section-subtitle">详细记录每日健康数据，支持趋势分析和历史对比。</p></div><divclass="table-container"><divclass="table-responsive"><table><thead><tr><th>日期</th><th>步数</th><th>心率 (bpm)</th><th>睡眠 (小时)</th><th>卡路里</th><th>体重 (kg)</th><th>BMI</th><th>健康状态</th></tr></thead><tbody><tr><td>2023-06-15</td><td>8,542</td><td>72</td><td>7.2</td><td>2,340</td><td>68.5</td><td>22.3</td><td><spanclass="status-badge status-good">良好</span></td></tr><tr><td>2023-06-14</td><td>7,623</td><td>74</td><td>6.8</td><td>2,120</td><td>68.7</td><td>22.4</td><td><spanclass="status-badge status-fair">一般</span></td></tr><tr><td>2023-06-13</td><td>9,124</td><td>71</td><td>7.5</td><td>2,450</td><td>68.4</td><td>22.3</td><td><spanclass="status-badge status-good">良好</span></td></tr><tr><td>2023-06-12</td><td>6,542</td><td>76</td><td>6.2</td><td>1,980</td><td>68.9</td><td>22.5</td><td><spanclass="status-badge status-poor">不佳</span></td></tr><tr><td>2023-06-11</td><td>8,921</td><td>73</td><td>7.8</td><td>2,380</td><td>68.6</td><td>22.4</td><td><spanclass="status-badge status-good">良好</span></td></tr><tr><td>2023-06-10</td><td>10,235</td><td>70</td><td>7.0</td><td>2,680</td><td>68.8</td><td>22.4</td><td><spanclass="status-badge status-good">良好</span></td></tr><tr><td>2023-06-09</td><td>5,432</td><td>78</td><td>6.5</td><td>1,870</td><td>69.1</td><td>22.6</td><td><spanclass="status-badge status-poor">不佳</span></td></tr></tbody></table></div><divstyle="margin-top:25px;display:flex;justify-content:space-between;align-items:center;color:var(--gray-color);font-size:0.95rem;"><div>显示 7 条记录中的 1-7 条</div><divstyle="display:flex;gap:10px;"><buttonclass="btn btn-secondary"style="padding:8px 16px;font-size:0.9rem;"><iclass="fas fa-chevron-left"></i>上一页</button><buttonclass="btn btn-primary"style="padding:8px 16px;font-size:0.9rem;">下一页<iclass="fas fa-chevron-right"></i></button></div></div></div></section><!-- 关于项目部分 --><sectionid="about"><divclass="section-header"><h2class="section-title">关于本项目</h2><pclass="section-subtitle">纯HTML/CSS实现的毕业设计项目，展示现代Web开发技术在实际应用中的潜力。</p></div><divclass="card"><divclass="card-header"><div><h3class="card-title">毕业设计说明</h3><divclass="card-change"style="color:var(--primary-color);"><iclass="fas fa-graduation-cap"></i><span>计算机科学与技术专业毕业设计</span></div></div><divclass="card-icon-container blue"><iclass="fas fa-graduation-cap"></i></div></div><divstyle="padding:1.5rem 0;"><pstyle="margin-bottom:1.5rem;font-size:1.05rem;line-height:1.8;">本项目为大学生毕业设计作品，主题为"健康数据分析平台"，旨在展示如何通过纯HTML和CSS技术构建一个功能完善、界面美观的Web应用。项目完全使用HTML5和CSS3实现，无任何JavaScript依赖，展示了CSS在现代Web开发中的强大能力。</p><divstyle="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin:2.5rem 0;"><divstyle="background-color:var(--lighter-color);padding:1.8rem;border-radius:var(--border-radius-sm);"><h4style="color:var(--secondary-color);margin-bottom:1rem;display:flex;align-items:center;gap:10px;"><iclass="fas fa-cogs"style="color:var(--primary-color);"></i>实现功能</h4><ulstyle="list-style-type:none;padding-left:0;"><listyle="margin-bottom:10px;padding-left:24px;position:relative;"><iclass="fas fa-check"style="color:var(--success-color);position:absolute;left:0;"></i>数据仪表板：展示关键健康指标概览</li><listyle="margin-bottom:10px;padding-left:24px;position:relative;"><iclass="fas fa-check"style="color:var(--success-color);position:absolute;left:0;"></i>数据录入：通过表单收集健康数据</li><listyle="margin-bottom:10px;padding-left:24px;position:relative;"><iclass="fas fa-check"style="color:var(--success-color);position:absolute;left:0;"></i>数据可视化：使用CSS模拟图表展示数据趋势</li><listyle="margin-bottom:10px;padding-left:24px;position:relative;"><iclass="fas fa-check"style="color:var(--success-color);position:absolute;left:0;"></i>数据分析：表格形式展示历史数据及分析结果</li><listyle="padding-left:24px;position:relative;"><iclass="fas fa-check"style="color:var(--success-color);position:absolute;left:0;"></i>响应式设计：适配不同尺寸的屏幕设备</li></ul></div><divstyle="background-color:var(--lighter-color);padding:1.8rem;border-radius:var(--border-radius-sm);"><h4style="color:var(--secondary-color);margin-bottom:1rem;display:flex;align-items:center;gap:10px;"><iclass="fas fa-laptop-code"style="color:var(--primary-color);"></i>技术特点</h4><ulstyle="list-style-type:none;padding-left:0;"><listyle="margin-bottom:10px;padding-left:24px;position:relative;"><iclass="fas fa-star"style="color:var(--warning-color);position:absolute;left:0;"></i>100%纯HTML/CSS实现，无JavaScript依赖</li><listyle="margin-bottom:10px;padding-left:24px;position:relative;"><iclass="fas fa-star"style="color:var(--warning-color);position:absolute;left:0;"></i>使用CSS Grid和Flexbox实现现代布局</li><listyle="margin-bottom:10px;padding-left:24px;position:relative;"><iclass="fas fa-star"style="color:var(--warning-color);position:absolute;left:0;"></i>利用CSS变量实现主题化设计</li><listyle="margin-bottom:10px;padding-left:24px;position:relative;"><iclass="fas fa-star"style="color:var(--warning-color);position:absolute;left:0;"></i>通过CSS动画增强用户体验</li><listyle="padding-left:24px;position:relative;"><iclass="fas fa-star"style="color:var(--warning-color);position:absolute;left:0;"></i>采用语义化HTML标签，增强可访问性</li></ul></div></div><divstyle="background:linear-gradient(135deg,rgba(52,152,219,0.05)0%,rgba(26,188,156,0.05)100%);padding:2rem;border-radius:var(--border-radius-sm);margin-top:2rem;"><h4style="color:var(--secondary-color);margin-bottom:1rem;display:flex;align-items:center;gap:10px;"><iclass="fas fa-lightbulb"style="color:var(--accent-color);"></i>设计理念</h4><pstyle="line-height:1.8;">本设计旨在证明，即使不使用JavaScript，仅通过HTML和CSS也能创建功能丰富、交互性强的Web应用。项目展示了多种CSS高级技巧，包括CSS变量、Grid布局、Flexbox、动画、伪元素等。通过模拟数据可视化、表单验证和响应式设计，为毕业设计提供了一个完整的解决方案，展示了现代Web开发的最佳实践。</p></div></div></div></section></main><!-- 页脚 --><footer><divclass="container"><divclass="footer-content"><divclass="footer-section"><h3>健康数据分析平台</h3><pstyle="margin-top:1rem;color:rgba(255,255,255,0.8);line-height:1.7;">一个基于纯HTML/CSS的健康数据管理毕业设计项目，展示现代Web开发技术在实际应用中的潜力。</p></div><divclass="footer-section"><h3>快速链接</h3><ulclass="footer-links"><li><ahref="#dashboard"><iclass="fas fa-chevron-right"></i>仪表板</a></li><li><ahref="#input"><iclass="fas fa-chevron-right"></i>数据录入</a></li><li><ahref="#visualization"><iclass="fas fa-chevron-right"></i>数据可视化</a></li><li><ahref="#analysis"><iclass="fas fa-chevron-right"></i>数据分析</a></li><li><ahref="#about"><iclass="fas fa-chevron-right"></i>关于项目</a></li></ul></div><divclass="footer-section"><h3>联系信息</h3><ulclass="footer-links"><li><ahref="#"><iclass="fas fa-user-graduate"></i>设计者：计算机科学与技术专业毕业生</a></li><li><ahref="#"><iclass="fas fa-university"></i>学校：XX大学</a></li><li><ahref="#"><iclass="fas fa-calendar-alt"></i>毕业时间：2023年6月</a></li><li><ahref="#"><iclass="fas fa-envelope"></i>邮箱：graduation@example.com</a></li></ul></div></div><divclass="copyright"><p>© 2023 大学生毕业设计 - 健康数据分析平台. 本项目仅供毕业设计展示使用。</p><pstyle="margin-top:8px;">本页面完全使用HTML5和CSS3构建，无任何JavaScript代码。</p></div></div></footer><script>// ===== 主题切换功能 =====document.addEventListener('DOMContentLoaded',function(){constthemeButtons=document.querySelectorAll('.theme-btn');constbody=document.body;themeButtons.forEach(button=>{button.addEventListener('click',function(){consttheme=this.getAttribute('data-theme');// 更新主题类body.className='theme-'+theme;// 更新活动按钮状态themeButtons.forEach(btn=>btn.classList.remove('active'));this.classList.add('active');});});// ===== 导航高亮 =====constnavLinks=document.querySelectorAll('nav a');navLinks.forEach(link=>{link.addEventListener('click',function(e){// 如果是锚点链接，平滑滚动consthref=this.getAttribute('href');if(href.startsWith('#')){e.preventDefault();consttargetId=href.substring(1);consttargetElement=document.getElementById(targetId);if(targetElement){window.scrollTo({top:targetElement.offsetTop-80,behavior:'smooth'});}}// 更新活动状态navLinks.forEach(a=>a.classList.remove('active'));this.classList.add('active');});});// ===== 表单提交处理 =====consthealthForm=document.getElementById('health-form');constformLoading=document.getElementById('formLoading');healthForm.addEventListener('submit',function(e){e.preventDefault();// 显示加载动画formLoading.style.display='block';// 模拟表单提交延迟setTimeout(()=>{// 隐藏加载动画formLoading.style.display='none';// 显示成功消息showNotification('数据提交成功！系统已更新您的健康记录。','success');// 模拟更新仪表板数据updateDashboardData();},1500);});// ===== 生成示例数据 =====constgenerateDataBtn=document.getElementById('generateData');generateDataBtn.addEventListener('click',function(){// 生成随机数据document.getElementById('steps').value=Math.floor(Math.random()*5000)+5000;document.getElementById('heart-rate').value=Math.floor(Math.random()*20)+65;document.getElementById('sleep').value=(Math.random()*3+6).toFixed(1);document.getElementById('calories').value=Math.floor(Math.random()*1000)+1800;document.getElementById('water').value=Math.floor(Math.random()*1500)+1500;document.getElementById('weight').value=(Math.random()*5+65).toFixed(1);// 显示通知showNotification('已生成示例数据，您可以修改后提交。','info');});// ===== 标签页切换 =====consttabButtons=document.querySelectorAll('.tab-btn');consttabContents=document.querySelectorAll('.tab-content');tabButtons.forEach(button=>{button.addEventListener('click',function(){consttabId=this.getAttribute('data-tab');// 更新活动标签按钮tabButtons.forEach(btn=>btn.classList.remove('active'));this.classList.add('active');// 显示对应标签内容tabContents.forEach(content=>{content.classList.remove('active');});document.getElementById(tabId).classList.add('active');});});// ===== 返回顶部按钮 =====constbackToTopBtn=document.getElementById('backToTop');window.addEventListener('scroll',function(){if(window.pageYOffset>300){backToTopBtn.classList.add('visible');}else{backToTopBtn.classList.remove('visible');}});backToTopBtn.addEventListener('click',function(){window.scrollTo({top:0,behavior:'smooth'});});// ===== 页面加载动画 =====// 添加淡入动画到所有卡片constcards=document.querySelectorAll('.card, .data-input-container, .tabs-container, .table-container');cards.forEach((card,index)=>{card.style.opacity='0';card.style.transform='translateY(20px)';card.style.transition='opacity 0.6s ease, transform 0.6s ease';setTimeout(()=>{card.style.opacity='1';card.style.transform='translateY(0)';},100+index*100);});});// ===== 辅助函数 =====functionshowNotification(message,type){// 创建通知元素constnotification=document.createElement('div');notification.className=`notification notification-${type}`;notification.innerHTML=`<div style="position: fixed; top: 20px; right: 20px; background:${type==='success'?'#27ae60':type==='error'?'#e74c3c':'#3498db'}; color: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.2); z-index: 9999; display: flex; align-items: center; gap: 10px; max-width: 400px; animation: slideIn 0.3s ease;"> <i class="fas fa-${type==='success'?'check-circle':type==='error'?'exclamation-circle':'info-circle'}"></i> <span>${message}</span> </div>`;// 添加到页面document.body.appendChild(notification);// 3秒后移除setTimeout(()=>{notification.style.animation='slideOut 0.3s ease';setTimeout(()=>{document.body.removeChild(notification);},300);},3000);// 添加CSS动画if(!document.getElementById('notification-styles')){conststyle=document.createElement('style');style.id='notification-styles';style.textContent=`@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }`;document.head.appendChild(style);}}functionupdateDashboardData(){// 模拟更新仪表板数据conststepsValue=document.querySelector('.card:nth-child(1) .card-value');constheartRateValue=document.querySelector('.card:nth-child(2) .card-value');constsleepValue=document.querySelector('.card:nth-child(3) .card-value');constcaloriesValue=document.querySelector('.card:nth-child(4) .card-value');// 获取表单中的新值constnewSteps=document.getElementById('steps').value;constnewHeartRate=document.getElementById('heart-rate').value;constnewSleep=document.getElementById('sleep').value;constnewCalories=document.getElementById('calories').value;// 更新显示值stepsValue.innerHTML=`${parseInt(newSteps).toLocaleString()}<small>步</small>`;heartRateValue.innerHTML=`${newHeartRate}<small>bpm</small>`;sleepValue.innerHTML=`${newSleep}<small>小时</small>`;caloriesValue.innerHTML=`${parseInt(newCalories).toLocaleString()}<small>kcal</small>`;// 添加更新动画[stepsValue,heartRateValue,sleepValue,caloriesValue].forEach(el=>{el.style.color='#1abc9c';setTimeout(()=>{el.style.color='';},1000);});}</script></body></html>