|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AMC8 中文学习平台 - 历年真题与解析</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
.problem-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.problem-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.solution-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease; |
|
|
} |
|
|
.solution-content.expanded { |
|
|
max-height: 1000px; |
|
|
} |
|
|
|
|
|
.grid-fallback { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
@supports (display: grid) { |
|
|
.grid-fallback { |
|
|
display: grid; |
|
|
} |
|
|
} |
|
|
|
|
|
@media print { |
|
|
.no-print { |
|
|
display: none !important; |
|
|
} |
|
|
body { |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
font-size: 12pt; |
|
|
} |
|
|
.problem-card { |
|
|
page-break-inside: avoid; |
|
|
box-shadow: none; |
|
|
border: 1px solid #ddd; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans antialiased"> |
|
|
|
|
|
<nav class="bg-blue-600 text-white shadow-lg no-print"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<i class="fas fa-square-root-alt text-2xl mr-2"></i> |
|
|
<span class="font-bold text-xl">AMC8 学习平台</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-6"> |
|
|
<a href="#problems" class="hover:text-blue-200 transition">历年真题</a> |
|
|
<a href="#features" class="hover:text-blue-200 transition">学习资源</a> |
|
|
<a href="#about" class="hover:text-blue-200 transition">关于AMC8</a> |
|
|
<a href="#contact" class="hover:text-blue-200 transition">联系我们</a> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button id="mobile-menu-button" class="text-white focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden mt-2 pb-2"> |
|
|
<a href="#problems" class="block py-2 hover:bg-blue-500 px-2 rounded">历年真题</a> |
|
|
<a href="#features" class="block py-2 hover:bg-blue-500 px-2 rounded">学习资源</a> |
|
|
<a href="#about" class="block py-2 hover:bg-blue-500 px-2 rounded">关于AMC8</a> |
|
|
<a href="#contact" class="block py-2 hover:bg-blue-500 px-2 rounded">联系我们</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<header class="bg-gradient-to-r from-blue-700 to-blue-500 text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">AMC8 中文学习平台</h1> |
|
|
<p class="text-xl md:text-2xl mb-8">提供2000-2023年完整真题与详细解析</p> |
|
|
<div class="flex flex-col md:flex-row justify-center gap-4"> |
|
|
<a href="#problems" class="bg-white text-blue-600 font-bold py-3 px-6 rounded-lg hover:bg-blue-50 transition duration-300"> |
|
|
<i class="fas fa-book-open mr-2"></i>开始学习 |
|
|
</a> |
|
|
<a href="#features" class="bg-transparent border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-600 transition duration-300"> |
|
|
<i class="fas fa-star mr-2"></i>特色功能 |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="about" class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">关于 AMC8 竞赛</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-blue-50 p-6 rounded-lg shadow-md"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-info-circle text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">竞赛简介</h3> |
|
|
<p class="text-gray-600">AMC8是美国数学竞赛系列中的初中级别比赛，面向8年级及以下学生，旨在激发学生对数学的兴趣和才能。</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-6 rounded-lg shadow-md"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-calendar-alt text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">考试形式</h3> |
|
|
<p class="text-gray-600">40分钟完成25道选择题，满分25分。题目涵盖算术、代数、几何、数论和概率等数学领域。</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-6 rounded-lg shadow-md"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-trophy text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">奖项设置</h3> |
|
|
<p class="text-gray-600">荣誉证书(15分以上)、成就证书(18分以上)、卓越证书(21分以上)和满分奖(25分)。</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="problems" class="py-12 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-8 text-gray-800">历年真题与解析</h2> |
|
|
|
|
|
|
|
|
<div class="mb-8 bg-white p-4 rounded-lg shadow-md no-print"> |
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-700">筛选题目</h3> |
|
|
<div class="flex flex-col md:flex-row gap-4"> |
|
|
<div class="flex-1"> |
|
|
<label for="year-select" class="block text-sm font-medium text-gray-700 mb-1">选择年份</label> |
|
|
<select id="year-select" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="all">全部年份</option> |
|
|
<option value="2023">2023年</option> |
|
|
<option value="2022">2022年</option> |
|
|
<option value="2021">2021年</option> |
|
|
<option value="2020">2020年</option> |
|
|
<option value="2019">2019年</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<label for="difficulty-select" class="block text-sm font-medium text-gray-700 mb-1">难度级别</label> |
|
|
<select id="difficulty-select" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="all">全部难度</option> |
|
|
<option value="easy">简单</option> |
|
|
<option value="medium">中等</option> |
|
|
<option value="hard">困难</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<label for="topic-select" class="block text-sm font-medium text-gray-700 mb-1">题目类型</label> |
|
|
<select id="topic-select" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="all">全部类型</option> |
|
|
<option value="algebra">代数</option> |
|
|
<option value="geometry">几何</option> |
|
|
<option value="number-theory">数论</option> |
|
|
<option value="combinatorics">组合数学</option> |
|
|
<option value="probability">概率</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid-fallback grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="problem-card bg-white rounded-lg overflow-hidden shadow-md" data-year="2023" data-difficulty="medium" data-topic="geometry"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">2023年</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">几何</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">第15题</h3> |
|
|
<p class="text-gray-600 mb-4">一个正方形的边长为4，四个角上各剪去一个边长为1的小正方形，然后将剩余部分折叠成一个无盖的盒子。这个盒子的体积是多少？</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">中等难度</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">体积计算</span> |
|
|
</div> |
|
|
<button class="solution-toggle-btn w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-lightbulb mr-2"></i>查看解析 |
|
|
</button> |
|
|
</div> |
|
|
<div class="solution-content bg-gray-50 px-6 pt-0 pb-6"> |
|
|
<div class="border-t border-gray-200 pt-4"> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">解析：</h4> |
|
|
<p class="text-gray-700 mb-3">1. 原正方形边长为4，剪去四个角上边长为1的小正方形后，剩余部分可以看作一个十字形。</p> |
|
|
<p class="text-gray-700 mb-3">2. 折叠后，盒子的高度就是剪去的小正方形边长1。</p> |
|
|
<p class="text-gray-700 mb-3">3. 盒子的底面是一个边长为2的正方形（4-1×2=2）。</p> |
|
|
<p class="text-gray-700 mb-4">4. 因此体积为：底面积×高 = 2×2×1 = 4。</p> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">答案：</h4> |
|
|
<p class="text-green-600 font-bold">B) 4</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="problem-card bg-white rounded-lg overflow-hidden shadow-md" data-year="2022" data-difficulty="easy" data-topic="number-theory"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">2022年</span> |
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded">数论</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">第8题</h3> |
|
|
<p class="text-gray-600 mb-4">如果n是一个正整数，使得2n是3的倍数，3n是4的倍数，4n是5的倍数，那么n的最小可能值是多少？</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">简单难度</span> |
|
|
<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">最小公倍数</span> |
|
|
</div> |
|
|
<button class="solution-toggle-btn w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-lightbulb mr-2"></i>查看解析 |
|
|
</button> |
|
|
</div> |
|
|
<div class="solution-content bg-gray-50 px-6 pt-0 pb-6"> |
|
|
<div class="border-t border-gray-200 pt-4"> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">解析：</h4> |
|
|
<p class="text-gray-700 mb-3">1. 根据题意，我们可以将条件转化为：</p> |
|
|
<p class="text-gray-700 mb-3">- n是3/2的倍数（但n是整数，所以n必须是3的倍数）</p> |
|
|
<p class="text-gray-700 mb-3">- n是4/3的倍数（所以n必须是4的倍数）</p> |
|
|
<p class="text-gray-700 mb-3">- n是5/4的倍数（所以n必须是5的倍数）</p> |
|
|
<p class="text-gray-700 mb-4">2. 因此n必须同时是3、4和5的倍数，最小公倍数为60。</p> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">答案：</h4> |
|
|
<p class="text-green-600 font-bold">E) 60</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="problem-card bg-white rounded-lg overflow-hidden shadow-md" data-year="2021" data-difficulty="hard" data-topic="combinatorics"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">2021年</span> |
|
|
<span class="bg-pink-100 text-pink-800 text-xs font-semibold px-2.5 py-0.5 rounded">组合数学</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">第25题</h3> |
|
|
<p class="text-gray-600 mb-4">有6个不同的礼物要分给3个孩子，每个孩子至少得到1个礼物。有多少种不同的分配方式？</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">高难度</span> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">分配问题</span> |
|
|
</div> |
|
|
<button class="solution-toggle-btn w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-lightbulb mr-2"></i>查看解析 |
|
|
</button> |
|
|
</div> |
|
|
<div class="solution-content bg-gray-50 px-6 pt-0 pb-6"> |
|
|
<div class="border-t border-gray-200 pt-4"> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">解析：</h4> |
|
|
<p class="text-gray-700 mb-3">1. 这是一个典型的"将n个不同的物品分配到k个不同的盒子，每个盒子至少一个"的问题。</p> |
|
|
<p class="text-gray-700 mb-3">2. 可以使用容斥原理计算：总分配方式减去至少一个孩子没得到礼物的方式。</p> |
|
|
<p class="text-gray-700 mb-3">3. 总分配方式：3^6 = 729（每个礼物有3种选择）</p> |
|
|
<p class="text-gray-700 mb-3">4. 减去只有一个孩子得到礼物：C(3,1)×1^6 = 3</p> |
|
|
<p class="text-gray-700 mb-3">5. 减去只有两个孩子得到礼物：C(3,2)×2^6 = 3×64=192</p> |
|
|
<p class="text-gray-700 mb-4">6. 但是第二步多减了，需要加回：3^6 - 3×2^6 + 3×1^6 = 729 - 192 + 3 = 540</p> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">答案：</h4> |
|
|
<p class="text-green-600 font-bold">540</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="problem-card bg-white rounded-lg overflow-hidden shadow-md" data-year="2020" data-difficulty="medium" data-topic="algebra"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">2020年</span> |
|
|
<span class="bg-orange-100 text-orange-800 text-xs font-semibold px-2.5 py-0.5 rounded">代数</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">第18题</h3> |
|
|
<p class="text-gray-600 mb-4">解方程：2^(x+3) - 2^x = 224</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">中等难度</span> |
|
|
<span class="bg-teal-100 text-teal-800 text-xs font-medium px-2.5 py-0.5 rounded">指数方程</span> |
|
|
</div> |
|
|
<button class="solution-toggle-btn w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-lightbulb mr-2"></i>查看解析 |
|
|
</button> |
|
|
</div> |
|
|
<div class="solution-content bg-gray-50 px-6 pt-0 pb-6"> |
|
|
<div class="border-t border-gray-200 pt-4"> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">解析：</h4> |
|
|
<p class="text-gray-700 mb-3">1. 首先将方程左边因式分解：2^x(2^3 - 1) = 224</p> |
|
|
<p class="text-gray-700 mb-3">2. 计算括号内：8 - 1 = 7，所以方程变为：7×2^x = 224</p> |
|
|
<p class="text-gray-700 mb-3">3. 两边除以7：2^x = 32</p> |
|
|
<p class="text-gray-700 mb-4">4. 32是2的5次方，所以x=5。</p> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">答案：</h4> |
|
|
<p class="text-green-600 font-bold">5</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="problem-card bg-white rounded-lg overflow-hidden shadow-md" data-year="2019" data-difficulty="easy" data-topic="probability"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">2019年</span> |
|
|
<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">概率</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">第10题</h3> |
|
|
<p class="text-gray-600 mb-4">一个袋子里有3个红球和2个蓝球。随机取出2个球，都是红球的概率是多少？</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">简单难度</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">组合概率</span> |
|
|
</div> |
|
|
<button class="solution-toggle-btn w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-lightbulb mr-2"></i>查看解析 |
|
|
</button> |
|
|
</div> |
|
|
<div class="solution-content bg-gray-50 px-6 pt-0 pb-6"> |
|
|
<div class="border-t border-gray-200 pt-4"> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">解析：</h4> |
|
|
<p class="text-gray-700 mb-3">1. 总球数：3红 + 2蓝 = 5个球</p> |
|
|
<p class="text-gray-700 mb-3">2. 总的取法数：C(5,2) = 10</p> |
|
|
<p class="text-gray-700 mb-3">3. 取到两个红球的取法数：C(3,2) = 3</p> |
|
|
<p class="text-gray-700 mb-4">4. 概率 = 有利事件数 / 总事件数 = 3/10</p> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">答案：</h4> |
|
|
<p class="text-green-600 font-bold">C) 3/10</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="problem-card bg-white rounded-lg overflow-hidden shadow-md" data-year="2023" data-difficulty="hard" data-topic="geometry"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">2023年</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">几何</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">第24题</h3> |
|
|
<p class="text-gray-600 mb-4">在△ABC中，AB=5，BC=12，CA=13。点D在BC上，使得AD平分∠BAC。求BD的长度。</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">高难度</span> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">角平分线定理</span> |
|
|
</div> |
|
|
<button class="solution-toggle-btn w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-lightbulb mr-2"></i>查看解析 |
|
|
</button> |
|
|
</div> |
|
|
<div class="solution-content bg-gray-50 px-6 pt-0 pb-6"> |
|
|
<div class="border-t border-gray-200 pt-4"> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">解析：</h4> |
|
|
<p class="text-gray-700 mb-3">1. 首先验证△ABC是直角三角形：5² + 12² = 13² (25 + 144 = 169)。</p> |
|
|
<p class="text-gray-700 mb-3">2. 应用角平分线定理：BD/DC = AB/AC = 5/13</p> |
|
|
<p class="text-gray-700 mb-3">3. 设BD=5k，DC=13k，则BD+DC=BC=12 → 18k=12 → k=2/3</p> |
|
|
<p class="text-gray-700 mb-4">4. 因此BD=5×(2/3)=10/3</p> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">答案：</h4> |
|
|
<p class="text-green-600 font-bold">10/3</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 flex justify-center no-print"> |
|
|
<nav class="inline-flex rounded-md shadow"> |
|
|
<a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</a> |
|
|
<a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-blue-600 font-medium hover:bg-blue-50">1</a> |
|
|
<a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</a> |
|
|
<a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</a> |
|
|
<a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50"> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-12 bg-blue-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">平台特色功能</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition"> |
|
|
<div class="text-blue-600 mb-4 text-4xl"> |
|
|
<i class="fas fa-search"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">智能搜索</h3> |
|
|
<p class="text-gray-600">通过关键词、年份、难度和题型多维度筛选题目，快速定位所需内容。</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition"> |
|
|
<div class="text-blue-600 mb-4 text-4xl"> |
|
|
<i class="fas fa-book-reader"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">详细解析</h3> |
|
|
<p class="text-gray-600">每道题目配有步骤详细的解析，帮助学生理解解题思路和方法。</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition"> |
|
|
<div class="text-blue-600 mb-4 text-4xl"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">进度追踪</h3> |
|
|
<p class="text-gray-600">记录学习进度和错题，生成个人能力分析报告，针对性提升薄弱环节。</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition"> |
|
|
<div class="text-blue-600 mb-4 text-4xl"> |
|
|
<i class="fas fa-print"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">打印功能</h3> |
|
|
<p class="text-gray-600">支持题目和解析的打印，方便线下学习和模拟考试。</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-8 text-gray-800">联系我们</h2> |
|
|
<div class="max-w-2xl mx-auto bg-gray-50 p-8 rounded-lg shadow-md"> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label> |
|
|
<input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label> |
|
|
<input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label> |
|
|
<textarea id="message" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-300"> |
|
|
发送留言 |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">AMC8 学习平台</h3> |
|
|
<p class="text-gray-400">提供最全面的AMC8中文学习资源，助力数学竞赛备考。</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">快速链接</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#problems" class="text-gray-400 hover:text-white transition">历年真题</a></li> |
|
|
<li><a href="#features" class="text-gray-400 hover:text-white transition">学习资源</a></li> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-white transition">关于AMC8</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-white transition">联系我们</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">学习资源</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">数学公式表</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">解题技巧</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">模拟考试</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">视频讲解</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">关注我们</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-weixin"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-weibo"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-bilibili"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
<p class="mt-4 text-gray-400">订阅我们的新闻通讯</p> |
|
|
<div class="mt-2 flex"> |
|
|
<input type="email" placeholder="您的邮箱" class="px-3 py-2 bg-gray-700 text-white rounded-l-md focus:outline-none w-full"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-md transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
|
<p>© 2023 AMC8中文学习平台. 保留所有权利.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-6 right-6 bg-blue-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-blue-700 no-print"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.solution-toggle-btn').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const solutionContent = this.parentElement.nextElementSibling; |
|
|
solutionContent.classList.toggle('expanded'); |
|
|
|
|
|
|
|
|
const icon = this.querySelector('i'); |
|
|
if (solutionContent.classList.contains('expanded')) { |
|
|
icon.classList.remove('fa-lightbulb'); |
|
|
icon.classList.add('fa-eye-slash'); |
|
|
this.innerHTML = this.innerHTML.replace('查看解析', '收起解析'); |
|
|
} else { |
|
|
icon.classList.remove('fa-eye-slash'); |
|
|
icon.classList.add('fa-lightbulb'); |
|
|
this.innerHTML = this.innerHTML.replace('收起解析', '查看解析'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('opacity-0', 'invisible'); |
|
|
backToTopButton.classList.add('opacity-100', 'visible'); |
|
|
} else { |
|
|
backToTopButton.classList.remove('opacity-100', 'visible'); |
|
|
backToTopButton.classList.add('opacity-0', 'invisible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('back-to-top').addEventListener('click', function() { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('year-select').addEventListener('change', filterProblems); |
|
|
document.getElementById('difficulty-select').addEventListener('change', filterProblems); |
|
|
document.getElementById('topic-select').addEventListener('change', filterProblems); |
|
|
|
|
|
function filterProblems() { |
|
|
const year = document.getElementById('year-select').value; |
|
|
const difficulty = document.getElementById('difficulty-select').value; |
|
|
const topic = document.getElementById('topic-select').value; |
|
|
|
|
|
document.querySelectorAll('.problem-card').forEach(card => { |
|
|
const cardYear = card.getAttribute('data-year'); |
|
|
const cardDifficulty = card.getAttribute('data-difficulty'); |
|
|
const cardTopic = card.getAttribute('data-topic'); |
|
|
|
|
|
const yearMatch = year === 'all' || cardYear === year; |
|
|
const difficultyMatch = difficulty === 'all' || cardDifficulty === difficulty; |
|
|
const topicMatch = topic === 'all' || cardTopic === topic; |
|
|
|
|
|
if (yearMatch && difficultyMatch && topicMatch) { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
card.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cstur4/amc8" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
