HTML实战项目：高考加油和中考加油-EW帮帮网

设计思路

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

使用代表希望的蓝色和金色渐变作为主色调
顶部导航栏可切换高考/中考内容
添加动态倒计时功能
设计励志名言卡片和备考小贴士
添加动画效果增强视觉体验
确保移动端友好设计
下面是完整代码演示
<!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日）
励志内容：
- 三个激励卡片（智慧备考、心态调整、坚持到底）
- 备考小贴士板块
- 鼓舞人心的名言名句
视觉设计：
- 蓝金色渐变主题，象征希望与成功
- 卡片悬停动画效果
- 标题发光动画
- 响应式设计，适配各种设备
交互体验：
- 平滑的标签切换动画
- 卡片悬停效果
- 动态更新的倒计时
- 最后希望所有高考生和中考生旗开得胜，拔得头魁

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

设计思路

功能亮点

网站公告

今日签到

热门文章

最新发布