設計思路
頁面加載后會自動顯示高考內容,點擊頂部按鈕可以切換到中考內容。倒計時會每秒更新,為考生提供實時的備考時間參考。
-
使用代表希望的藍色和金色漸變作為主色調
-
頂部導航欄可切換高考/中考內容
-
添加動態倒計時功能
-
設計勵志名言卡片和備考小貼士
-
添加動畫效果增強視覺體驗
-
確保移動端友好設計
-
下面是完整代碼演示
-
<!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日)
-
-
勵志內容:
-
三個激勵卡片(智慧備考、心態調整、堅持到底)
-
備考小貼士板塊
-
鼓舞人心的名言名句
-
-
視覺設計:
-
藍金色漸變主題,象征希望與成功
-
卡片懸停動畫效果
-
標題發光動畫
-
響應式設計,適配各種設備
-
-
交互體驗:
-
平滑的標簽切換動畫
-
卡片懸停效果
-
動態更新的倒計時
-
最后希望所有高考生和中考生旗開得勝,拔得頭魁
-