这是为您生成的学校网站模板,包含完整的HTML、CSS和JavaScript文件,可直接运行。它采用现代卡片式布局,展示了校园新闻、课程、师资和活动等核心信息模块。 ```html 明德中学 · 官方网站
本模板由 顾老师AI 生成 | 内容仅供演示使用 学校网站模板

培养具有全球视野的未来公民

明德中学 · 厚德载物 知行合一

走进明德

一所致力于全人教育的现代化中学

传承 · 创新 · 卓越

明德中学创办于2003年,是省级示范性重点中学。学校秉承“明德至善,知行合一”的校训,融合中西教育精髓,打造了涵盖科技、人文、艺术、体育的多元课程体系。校园占地120亩,拥有智慧教室、创新实验室、室内体育馆、艺术中心等一流设施。

现有教职员工280人,其中特级教师12人,省级教学能手45人。近五年高考一本上线率持续保持在85%以上,先后荣获“全国素质教育示范校”、“省级文明校园”等称号。

0 年办学历史
0 在校学生
0 优秀教师
0 % 升学率

特色课程

多元选择,激发每个学生的潜能

名师团队

卓越的教师团队,引领成长

校园动态

最新资讯 · 精彩活动

联系我们

欢迎咨询或预约校园参观

浙江省杭州市西湖区文华路299号
0571-8888 6666
admission@mingde.edu.cn
工作日 8:00 - 17:00
``` ```css /* ===== style.css 独立样式文件 ===== */ /* 全局重置 & 字体 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: #f7f9fc; color: #1e293b; line-height: 1.6; scroll-behavior: smooth; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 导航栏 */ .navbar { position: fixed; top: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0,0,0,0.05); z-index: 999; transition: background 0.3s ease, box-shadow 0.3s; } .navbar.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: 0 4px 30px rgba(0,0,0,0.08); } .nav-container { display: flex; justify-content: space-between; align-items: center; height: 70px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.5rem; color: #1e3a5f; } .logo i { font-size: 2rem; color: #3b82f6; } .nav-menu ul { display: flex; list-style: none; gap: 28px; } .nav-link { font-weight: 500; color: #334155; padding: 6px 0; border-bottom: 2px solid transparent; transition: all 0.2s; } .nav-link:hover { color: #3b82f6; border-bottom-color: #3b82f6; } /* 汉堡菜单 */ .hamburger { display: none; flex-direction: column; cursor: pointer; background: none; border: none; padding: 6px; } .hamburger .bar { width: 28px; height: 3px; background: #1e293b; margin: 4px 0; border-radius: 4px; transition: 0.3s; } /* Hero */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, #0b2a4a 0%, #1e4b7a 50%, #2d6da8 100%); position: relative; padding: 100px 20px 60px; color: #fff; } .hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); z-index: 0; } .hero-content { position: relative; z-index: 1; max-width: 800px; } .hero-content h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; text-shadow: 0 4px 20px rgba(0,0,0,0.2); } .hero-content p { font-size: 1.3rem; opacity: 0.9; margin-bottom: 32px; } .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; padding: 14px 36px; border-radius: 50px; font-weight: 600; transition: all 0.25s ease; border: 2px solid transparent; cursor: pointer; font-size: 1rem; } .btn-primary { background: #f59e0b; color: #0b2a4a; border-color: #f59e0b; } .btn-primary:hover { background: #fbbf24; transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(245, 158, 11, 0.4); } .btn-outline { background: transparent; color: #fff; border-color: #fff; } .btn-outline:hover { background: #fff; color: #1e3a5f; transform: translateY(-3px); } /* 通用section */ .section { padding: 90px 0; } .section-title { text-align: center; margin-bottom: 56px; } .section-title h2 { font-size: 2.4rem; font-weight: 700; color: #0f2b45; margin-bottom: 8px; } .section-title p { color: #64748b; font-size: 1.1rem; } /* about 网格 */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .about-text h3 { font-size: 1.8rem; margin-bottom: 16px; color: #0f2b45; } .about-text p { margin-bottom: 16px; color: #334155; line-height: 1.8; } .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .stat-item { background: #fff; border-radius: 20px; padding: 28px 16px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.04); transition: transform 0.2s; } .stat-item:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.06); } .stat-number { display: block; font-size: 2.8rem; font-weight: 700; color: #3b82f6; line-height: 1.2; } .stat-label { color: #64748b; font-weight: 500; } /* 卡片网格通用 */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; } .card { background: #fff; border-radius: 24px; padding: 28px 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.04); transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.02); } .card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.15); } .card-icon { font-size: 2.6rem; margin-bottom: 12px; color: #3b82f6; } .card h3 { font-size: 1.3rem; margin-bottom: 8px; color: #0f2b45; } .card p { color: #475569; font-size: 0.95rem; margin-bottom: 12px; } .card-tag { display: inline-block; background: #eef2ff; color: #3b82f6; padding: 4px 12px; border-radius: 30px; font-size: 0.8rem; font-weight: 500; } /* 教师卡片特殊样式 */ .teacher-card { text-align: center; padding: 32px 16px; } .teacher-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(145deg, #3b82f6, #8b5cf6); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 2.2rem; color: #fff; font-weight: 600; } /* 新闻flex */ .news-flex { display: flex; flex-direction: column; gap: 28px; } .news-item { background: #fff; border-radius: 20px; padding: 28px 32px; box-shadow: 0 4px 16px rgba(0,0,0,0.03); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; transition: all 0.2s; border-left: 6px solid #3b82f6; } .news-item:hover { background: #fafcff; box-shadow: 0 8px 28px rgba(0,0,0,0.06); } .news-content h4 { font-size: 1.2rem; margin-bottom: 6px; } .news-content p { color: #64748b; font-size: 0.95rem; } .news-date { color: #94a3b8; font-size: 0.85rem; white-space: nowrap; } /* 联系区域 */ .contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: #fff; border-radius: 32px; padding: 48px; box-shadow: 0 12px 40px rgba(0,0,0,0.04); } .contact-info .info-item { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; color: #334155; } .contact-info i { width: 24px; color: #3b82f6; font-size: 1.2rem; } .social-links { margin-top: 24px; display: flex; gap: 20px; } .social-links a { font-size: 1.8rem; color: #64748b; transition: color 0.2s; } .social-links a:hover { color: #3b82f6; } .contact-form { display: flex; flex-direction: column; gap: 16px; } .contact-form input, .contact-form textarea { padding: 16px 20px; border: 1px solid #e2e8f0; border-radius: 16px; font-size: 1rem; font-family: inherit; transition: border 0.2s; background: #f8fafc; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #3b82f6; background: #fff; } .contact-form .btn { align-self: flex-start; } .form-feedback { font-size: 0.9rem; color: #16a34a; min-height: 24px; } /* footer */ .footer { background: #0b2a4a; color: #cbd5e1; padding: 32px 0; text-align: center; } .footer-content p { margin: 6px 0; } /* 响应式 */ @media (max-width: 768px) { .nav-menu { position: absolute; top: 70px; left: 0; width: 100%; background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); padding: 20px 0; border-radius: 0 0 24px 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); display: none; transition: all 0.3s; } .nav-menu.active { display: block; } .nav-menu ul { flex-direction: column; align-items: center; gap: 20px; } .hamburger { display: flex; } .about-grid { grid-template-columns: 1fr; } .contact-wrapper { grid-template-columns: 1fr; padding: 28px; } .hero-content h1 { font-size: 2.4rem; } .stat-number { font-size: 2rem; } } @media (max-width: 480px) { .card-grid { grid-template-columns: 1fr; } .news-item { flex-direction: column; align-items: flex-start; } } ``` ```javascript // ===== script.js 独立逻辑文件 ===== // 1. 导航滚动变色 + 汉堡菜单 const navbar = document.getElementById('navbar'); const hamburger = document.getElementById('hamburger'); const navMenu = document.getElementById('navMenu'); window.addEventListener('scroll', () => { if (window.scrollY > 60) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); hamburger.addEventListener('click', () => { navMenu.classList.toggle('active'); }); // 点击导航链接关闭菜单(移动端) document.querySelectorAll('.nav-link').forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('active'); }); }); // 2. 特色课程数据 (模拟) const courses = [ { icon: 'fa-robot', title: '人工智能基础', desc: 'Python编程、机器学习入门,培养计算思维。', tag: 'STEM' }, { icon: 'fa-palette', title: '创意艺术工坊', desc: '油画、陶艺、数字媒体,释放创造力。', tag: '艺术' }, { icon: 'fa-dna', title: '生命科学探究', desc: '实验室项目,从DNA到生态系统的奇妙旅程。', tag: '科学' }, { icon: 'fa-futbol', title: '竞技体育训练', desc: '足球、篮球、击剑,专业教练指导。', tag: '体育' }, { icon: 'fa-globe-asia', title: '国际理解课程', desc: '跨文化交际、模拟联合国,拓展全球视野。', tag: '人文' }, { icon: 'fa-music', title: '器乐与合唱', desc: '交响乐团、合唱团,登上省级舞台。', tag: '艺术' } ]; const courseGrid = document.getElementById('courseGrid'); courses.forEach(c => { const card = document.createElement('div'); card.className = 'card'; card.innerHTML = `

${c.title}

${c.desc}

${c.tag} `; courseGrid.appendChild(card); }); // 3. 师资团队 (模拟) const teachers = [ { name: '张明远', subject: '数学特级教师', initial: '张' }, { name: '李婉清', subject: '语文首席教师', initial: '李' }, { name: '王振宇', subject: '物理竞赛教练', initial: '王' }, { name: '陈雅琳', subject: '英语教研组长', initial: '陈' } ]; const teacherGrid = document.getElementById('teacherGrid'); teachers.forEach(t => { const card = document.createElement('div'); card.className = 'card teacher-card'; card.innerHTML = `
${t.initial}

${t.name}

${t.subject}

`; teacherGrid.appendChild(card); }); // 4. 新闻动态 (模拟) const newsItems = [ { title: '我校学子在全国机器人竞赛中荣获金奖', desc: '高二年级陈思远、李沐阳团队设计“智能垃圾分类系统”获得评委一致好评。', date: '2025-03-15' }, { title: '春季校园艺术节圆满落幕', desc: '书画展、音乐汇演、戏剧之夜,为期两周的艺术盛宴展现明德学子风采。', date: '2025-03-28' }, { title: '2025年国际交流项目正式启动', desc: '与英国圣安德鲁中学、新加坡德明中学建立交换生合作,报名截至4月20日。', date: '2025-04-02' }, { title: '高考百日誓师大会隆重举行', desc: '高三年级全体师生及家长代表共同参与,以昂扬斗志迎接挑战。', date: '2025-02-28' } ]; const newsContainer = document.getElementById('newsContainer'); newsItems.forEach(n => { const item = document.createElement('div'); item.className = 'news-item'; item.innerHTML = `

${n.title}

${n.desc}

${n.date} `; newsContainer.appendChild(item); }); // 5. 数字滚动动画 (简单实现) const statNumbers = document.querySelectorAll('.stat-number'); const observerOptions = { threshold: 0.5, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const el = entry.target; const target = parseInt(el.getAttribute('data-target'), 10); if (!el.dataset.animated) { el.dataset.animated = 'true'; animateNumber(el, target); } } }); }, observerOptions); statNumbers.forEach(num => observer.observe(num)); function animateNumber(element, target) { let current = 0; const step = Math.ceil(target / 50); const timer = setInterval(() => { current += step; if (current >= target) { current = target; clearInterval(timer); } element.textContent = current + (target === 96 ? '%' : ''); }, 30); } // 6. 表单验证 + 提交反馈 const contactForm = document.getElementById('contactForm'); const formFeedback = document.getElementById('formFeedback'); contactForm.addEventListener('submit', (e) => { e.preventDefault(); const name = document.getElementById('formName').value.trim(); const email = document.getElementById('formEmail').value.trim(); const message = document.getElementById('formMessage').value.trim(); if (!name || !email || !message) { formFeedback.style.color = '#dc2626'; formFeedback.textContent = '请填写所有必填字段。'; return; } if (!email.includes('@') || !email.includes('.')) { formFeedback.style.color = '#dc2626'; formFeedback.textContent = '请输入有效的电子邮箱。'; return; } formFeedback.style.color = '#16a34a'; formFeedback.textContent = '✅ 感谢您的留言,我们会尽快回复!'; contactForm.reset(); });