HTML实战项目：高考加油和中考加油

设计思路

页面加载后会自动显示高考内容，点击顶部按钮可以切换到中考内容。倒计时会每秒更新，为考生提供实时的备考时间参考。

使用代表希望的蓝色和金色渐变作为主色调
顶部导航栏可切换高考/中考内容
添加动态倒计时功能
设计励志名言卡片和备考小贴士
添加动画效果增强视觉体验
确保移动端友好设计
下面是完整代码演示
<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>加油吧！学子们 - 高考中考加油</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Microsoft YaHei', sans-serif;

}

body {

background: linear-gradient(135deg, #1a2980, #26d0ce);

color: #fff;

min-height: 100vh;

padding-bottom: 40px;

background-attachment: fixed;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 20px;

}

header {

text-align: center;

padding: 30px 0;

position: relative;

}

h1 {

font-size: 3.5rem;

margin-bottom: 10px;

text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

background: linear-gradient(45deg, #ffd700, #ff8c00, #ff4500);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

animation: titleGlow 2s infinite alternate;

}

@keyframes titleGlow {

0% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }

100% { text-shadow: 0 0 20px rgba(255, 140, 0, 0.8), 0 0 30px rgba(255, 69, 0, 0.6); }

}

.subtitle {

font-size: 1.2rem;

opacity: 0.9;

max-width: 700px;

margin: 0 auto 30px;

line-height: 1.6;

}

.tabs {

display: flex;

justify-content: center;

margin-bottom: 40px;

flex-wrap: wrap;

}

.tab-btn {

background: rgba(255, 255, 255, 0.15);

border: none;

color: white;

padding: 15px 35px;

font-size: 1.2rem;

border-radius: 50px;

margin: 0 10px;

cursor: pointer;

transition: all 0.3s ease;

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.2);

}

.tab-btn:hover {

background: rgba(255, 255, 255, 0.25);

transform: translateY(-3px);

}

.tab-btn.active {

background: linear-gradient(45deg, #ff8c00, #ffd700);

color: #1a2980;

font-weight: bold;

box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);

}

.content-section {

display: none;

animation: fadeIn 0.8s ease;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

.content-section.active {

display: block;

}

.countdown {

background: rgba(0, 0, 0, 0.2);

border-radius: 20px;

padding: 30px;

margin: 30px auto;

max-width: 800px;

text-align: center;

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.1);

}

.countdown-title {

font-size: 1.8rem;

margin-bottom: 25px;

color: #ffd700;

}

.timer {

display: flex;

justify-content: center;

gap: 20px;

flex-wrap: wrap;

}

.timer-box {

background: rgba(255, 255, 255, 0.1);

border-radius: 15px;

padding: 20px 15px;

min-width: 120px;

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

transition: transform 0.3s ease;

}

.timer-box:hover {

transform: translateY(-10px);

background: rgba(255, 255, 255, 0.2);

}

.timer-value {

font-size: 3.5rem;

font-weight: bold;

color: #ffd700;

text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);

}

.timer-label {

font-size: 1.1rem;

margin-top: 10px;

opacity: 0.8;

}

.motivational-section {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 25px;

margin: 40px 0;

}

.card {

background: rgba(255, 255, 255, 0.1);

border-radius: 20px;

padding: 30px;

text-align: center;

transition: all 0.4s ease;

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.1);

}

.card:hover {

transform: translateY(-10px);

background: rgba(255, 255, 255, 0.2);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);

}

.card i {

font-size: 3.5rem;

color: #ffd700;

margin-bottom: 20px;

}

.card h3 {

font-size: 1.8rem;

margin-bottom: 15px;

color: #ffd700;

}

.card p {

line-height: 1.8;

font-size: 1.1rem;

}

.quote {

font-style: italic;

margin-top: 15px;

padding: 15px;

border-left: 3px solid #ffd700;

background: rgba(0, 0, 0, 0.1);

border-radius: 0 10px 10px 0;

}

.tips-section {

background: rgba(0, 0, 0, 0.2);

border-radius: 20px;

padding: 40px;

margin: 50px 0;

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.1);

}

.section-title {

text-align: center;

font-size: 2.2rem;

margin-bottom: 30px;

color: #ffd700;

}

.tips-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 25px;

}

.tip-item {

background: rgba(255, 255, 255, 0.1);

border-radius: 15px;

padding: 25px;

display: flex;

align-items: flex-start;

gap: 15px;

}

.tip-item i {

color: #ffd700;

font-size: 1.8rem;

min-width: 40px;

padding-top: 5px;

}

.tip-content h4 {

font-size: 1.4rem;

margin-bottom: 10px;

color: #ffd700;

}

.encouragement {

text-align: center;

padding: 50px 20px;

font-size: 2.2rem;

font-weight: bold;

margin: 40px 0;

background: linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));

border-radius: 20px;

animation: pulse 2s infinite;

}

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.02); }

100% { transform: scale(1); }

}

footer {

text-align: center;

padding: 30px;

margin-top: 40px;

font-size: 1.1rem;

opacity: 0.8;

}

/* 响应式设计 */

@media (max-width: 768px) {

h1 {

font-size: 2.5rem;

}

.tab-btn {

padding: 12px 25px;

font-size: 1rem;

margin-bottom: 10px;

}

.timer-box {

min-width: 80px;

padding: 15px 10px;

}

.timer-value {

font-size: 2.2rem;

}

.encouragement {

font-size: 1.6rem;

padding: 30px 15px;

}

.tips-section {

padding: 25px;

}

}

@media (max-width: 480px) {

h1 {

font-size: 2rem;

}

.timer-box {

min-width: 70px;

}

.timer-value {

font-size: 1.8rem;

}

}

</style>

</head>

<body>

<div class="container">

<header>

<h1><i class="fas fa-graduation-cap"></i> 高考加油 & 中考加油</h1>

<p class="subtitle">青春无悔，奋斗最美！无论高考还是中考，都是人生的重要里程碑。愿你以梦为马，不负韶华，全力以赴，创造属于自己的辉煌！</p>

<div class="tabs">

<button class="tab-btn active" data-tab="gaokao">高考加油</button>

<button class="tab-btn" data-tab="zhongkao">中考加油</button>

</div>

</header>



<section id="gaokao-content" class="content-section active">

<div class="countdown">

<h2 class="countdown-title">2025年高考倒计时</h2>

<div class="timer">

<div class="timer-box">

<div class="timer-value" id="days-gaokao">365</div>

<div class="timer-label">天</div>

</div>

<div class="timer-box">

<div class="timer-value" id="hours-gaokao">00</div>

<div class="timer-label">小时</div>

</div>

<div class="timer-box">

<div class="timer-value" id="minutes-gaokao">00</div>

<div class="timer-label">分钟</div>

</div>

<div class="timer-box">

<div class="timer-value" id="seconds-gaokao">00</div>

<div class="timer-label">秒钟</div>

</div>

</div>

</div>

<div class="motivational-section">

<div class="card">

<i class="fas fa-brain"></i>

<h3>智慧备考</h3>

<p>科学规划时间，掌握核心考点，理解重于记忆。制定合理的复习计划，注重知识体系的构建。</p>

<p class="quote">"博观而约取，厚积而薄发。" --- 苏轼</p>

</div>

<div class="card">

<i class="fas fa-heart"></i>

<h3>心态调整</h3>

<p>保持平和心态，相信自己的努力。适度的压力是动力，过度的焦虑是阻力。学会放松，保持自信。</p>

<p class="quote">"非淡泊无以明志，非宁静无以致远。" --- 诸葛亮</p>

</div>

<div class="card">

<i class="fas fa-running"></i>

<h3>坚持到底</h3>

<p>高考是场马拉松，坚持到最后才是胜利。每天进步一点点，积少成多，终将迎来质的飞跃。</p>

<p class="quote">"路漫漫其修远兮，吾将上下而求索。" --- 屈原</p>

</div>

</div>

<div class="encouragement">

乾坤未定，你我皆是黑马！高考必胜！

</div>

<div class="tips-section">

<h2 class="section-title">高考备考小贴士</h2>

<div class="tips-grid">

<div class="tip-item">

<i class="fas fa-book"></i>

<div class="tip-content">

<h4>回归基础</h4>

<p>最后阶段要回归课本，巩固基础知识，确保基础题不丢分。</p>

</div>

</div>

<div class="tip-item">

<i class="fas fa-clock"></i>

<div class="tip-content">

<h4>时间管理</h4>

<p>模拟真实考试环境进行限时训练，提高答题速度和准确率。</p>

</div>

</div>

<div class="tip-item">

<i class="fas fa-utensils"></i>

<div class="tip-content">

<h4>健康饮食</h4>

<p>保持均衡饮食，多吃蔬菜水果，适量补充蛋白质，避免油腻食物。</p>

</div>

</div>

<div class="tip-item">

<i class="fas fa-bed"></i>

<div class="tip-content">

<h4>规律作息</h4>

<p>调整生物钟，保证充足睡眠，确保考试时段精力充沛。</p>

</div>

</div>

</div>

</div>

</section>



<section id="zhongkao-content" class="content-section">

<div class="countdown">

<h2 class="countdown-title">2025年中考倒计时</h2>

<div class="timer">

<div class="timer-box">

<div class="timer-value" id="days-zhongkao">120</div>

<div class="timer-label">天</div>

</div>

<div class="timer-box">

<div class="timer-value" id="hours-zhongkao">00</div>

<div class="timer-label">小时</div>

</div>

<div class="timer-box">

<div class="timer-value" id="minutes-zhongkao">00</div>

<div class="timer-label">分钟</div>

</div>

<div class="timer-box">

<div class="timer-value" id="seconds-zhongkao">00</div>

<div class="timer-label">秒钟</div>

</div>

</div>

</div>

<div class="motivational-section">

<div class="card">

<i class="fas fa-lightbulb"></i>

<h3>高效学习</h3>

<p>掌握学习方法比死记硬背更重要。学会总结归纳，建立知识网络，提高学习效率。</p>

<p class="quote">"学而不思则罔，思而不学则殆。" --- 孔子</p>

</div>

<div class="card">

<i class="fas fa-balance-scale"></i>

<h3>均衡发展</h3>

<p>不要偏科，各科均衡发展才能取得理想成绩。合理安排各科复习时间，扬长补短。</p>

<p class="quote">"不积跬步，无以至千里；不积小流，无以成江海。" --- 荀子</p>

</div>

<div class="card">

<i class="fas fa-users"></i>

<h3>团队协作</h3>

<p>与同学组成学习小组，互相讨论、互相提问，共同进步。分享学习心得，解决疑难问题。</p>

<p class="quote">"独学而无友，则孤陋而寡闻。" --- 《礼记》</p>

</div>

</div>

<div class="encouragement">

今日拼搏努力，他朝谁与争锋！中考加油！

</div>

<div class="tips-section">

<h2 class="section-title">中考备考小贴士</h2>

<div class="tips-grid">

<div class="tip-item">

<i class="fas fa-pencil-alt"></i>

<div class="tip-content">

<h4>规范答题</h4>

<p>注意答题规范，书写工整，步骤清晰，避免不必要的扣分。</p>

</div>

</div>

<div class="tip-item">

<i class="fas fa-redo"></i>

<div class="tip-content">

<h4>错题整理</h4>

<p>建立错题本，定期回顾，分析错误原因，避免重复犯错。</p>

</div>

</div>

<div class="tip-item">

<i class="fas fa-dumbbell"></i>

<div class="tip-content">

<h4>适度运动</h4>

<p>每天保持适量运动，如散步、慢跑等，缓解压力，增强体质。</p>

</div>

</div>

<div class="tip-item">

<i class="fas fa-mobile-alt"></i>

<div class="tip-content">

<h4>减少干扰</h4>

<p>学习时远离手机等电子设备，创造安静的学习环境，提高专注力。</p>

</div>

</div>

</div>

</div>

</section>

<footer>

<p>© 2025 加油吧！学子们 | 高考中考加油专题</p>

<p>愿每一位学子都能发挥最佳水平，实现心中梦想！</p>

</footer>

</div>

<script>

// 切换标签页

document.querySelectorAll('.tab-btn').forEach(button => {

button.addEventListener('click', () => {

// 更新按钮状态

document.querySelectorAll('.tab-btn').forEach(btn => {

btn.classList.remove('active');

});

button.classList.add('active');

// 显示对应内容

const tabId = button.getAttribute('data-tab');

document.querySelectorAll('.content-section').forEach(section => {

section.classList.remove('active');

});

document.getElementById(`${tabId}-content`).classList.add('active');

});

});

// 倒计时函数

function updateCountdown(targetDate, daysId, hoursId, minutesId, secondsId) {

const now = new Date().getTime();

const distance = targetDate - now;

if (distance < 0) {

// 考试已结束

document.getElementById(daysId).textContent = "0";

document.getElementById(hoursId).textContent = "0";

document.getElementById(minutesId).textContent = "0";

document.getElementById(secondsId).textContent = "0";

return;

}

// 计算天、时、分、秒

const days = Math.floor(distance / (1000 * 60 * 60 * 24));

const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((distance % (1000 * 60)) / 1000);

// 更新显示

document.getElementById(daysId).textContent = days;

document.getElementById(hoursId).textContent = hours.toString().padStart(2, '0');

document.getElementById(minutesId).textContent = minutes.toString().padStart(2, '0');

document.getElementById(secondsId).textContent = seconds.toString().padStart(2, '0');

}

// 设置高考日期 (2025年6月7日)

const gaokaoDate = new Date("June 7, 2025 09:00:00").getTime();

// 设置中考日期 (2025年6月20日)

const zhongkaoDate = new Date("June 20, 2025 09:00:00").getTime();

// 初始化倒计时

updateCountdown(gaokaoDate, "days-gaokao", "hours-gaokao", "minutes-gaokao", "seconds-gaokao");

updateCountdown(zhongkaoDate, "days-zhongkao", "hours-zhongkao", "minutes-zhongkao", "seconds-zhongkao");

// 每秒更新一次倒计时

setInterval(() => {

updateCountdown(gaokaoDate, "days-gaokao", "hours-gaokao", "minutes-gaokao", "seconds-gaokao");

updateCountdown(zhongkaoDate, "days-zhongkao", "hours-zhongkao", "minutes-zhongkao", "seconds-zhongkao");

}, 1000);

// 添加卡片悬停效果

document.querySelectorAll('.card').forEach(card => {

card.addEventListener('mouseenter', () => {

card.style.transform = 'translateY(-10px)';

});

card.addEventListener('mouseleave', () => {

card.style.transform = 'translateY(0)';

});

});

</script>

</body>

</html>

功能亮点

双主题设计：通过标签页切换高考和中高考内容
动态倒计时：
- 高考倒计时（2025年6月7日）
- 中考倒计时（2025年6月20日）
励志内容：
- 三个激励卡片（智慧备考、心态调整、坚持到底）
- 备考小贴士板块
- 鼓舞人心的名言名句
视觉设计：
- 蓝金色渐变主题，象征希望与成功
- 卡片悬停动画效果
- 标题发光动画
- 响应式设计，适配各种设备
交互体验：
- 平滑的标签切换动画
- 卡片悬停效果
- 动态更新的倒计时
- 最后希望所有高考生和中考生旗开得胜，拔得头魁