HTML5 CSS3学校模板如何适配不同设备？-网站模板-锦华智联科技

现代化设计：使用渐变色、卡片式布局和流畅的动画效果。
响应式布局：使用Flexbox和CSS Grid，确保在各种设备上都有良好体验。
HTML5语义化标签：使用 <header>, <nav>, <main>, <section>, <footer> 等标签，结构清晰，对SEO友好。
CSS3高级特性：使用了变量、calc()、filter、transform 等现代CSS技术。
可扩展性强：结构清晰，您可以轻松地添加更多页面或修改样式。

文件结构

为了保持项目整洁,我们创建以下文件结构：

（图片来源网络，侵删）

school-template/
├── index.html          # 主页
├── css/
│   └── style.css       # 主样式表
├── images/
│   ├── logo.png        # 学校Logo
│   ├── hero-bg.jpg     # 首页大图背景
│   └── placeholder.png # 图片占位符
└── js/
    └── script.js       # 简单的交互脚本

HTML 代码 (`index.html`)

这是网站的主页,包含了所有必要的结构和内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">梦想学院 - 开启您的知识之旅</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 页头 -->
    <header class="main-header">
        <div class="container">
            <div class="logo">
                <img src="images/logo.png" alt="梦想学院Logo">
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="#home" class="active">首页</a></li>
                    <li><a href="#about">关于我们</a></li>
                    <li><a href="#courses">课程设置</a></li>
                    <li><a href="#admissions">招生信息</a></li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <!-- 英雄区域 -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>欢迎来到梦想学院</h1>
                <p>我们致力于提供卓越的教育，培养未来的领袖和创新者。</p>
                <a href="#admissions" class="cta-button">立即申请</a>
            </div>
        </section>
        <!-- 关于我们 -->
        <section id="about" class="about-section">
            <div class="container">
                <h2>关于我们</h2>
                <div class="about-content">
                    <div class="about-text">
                        <p>梦想学院成立于2010年，是一所充满活力与创新精神的高等学府，我们拥有世界一流的师资力量和先进的教学设施，为学生提供理论与实践相结合的优质教育。</p>
                        <p>我们的使命是激发每一位学生的潜能，培养他们成为具有全球视野、社会责任感和创新能力的优秀人才。</p>
                    </div>
                    <div class="about-image">
                        <img src="images/placeholder.png" alt="校园风光">
                    </div>
                </div>
            </div>
        </section>
        <!-- 课程设置 -->
        <section id="courses" class="courses-section">
            <div class="container">
                <h2>课程设置</h2>
                <div class="course-grid">
                    <div class="course-card">
                        <div class="course-icon">📚</div>
                        <h3>计算机科学</h3>
                        <p>涵盖人工智能、数据科学、软件工程等前沿领域。</p>
                    </div>
                    <div class="course-card">
                        <div class="course-icon">🧪</div>
                        <h3>生命科学</h3>
                        <p>探索生物学、化学、医学的奥秘，推动生命健康进步。</p>
                    </div>
                    <div class="course-card">
                        <div class="course-icon">🎨</div>
                        <h3>艺术设计</h3>
                        <p>培养创意思维与美学素养，塑造视觉艺术新力量。</p>
                    </div>
                    <div class="course-card">
                        <div class="course-icon">📊</div>
                        <h3>商学院</h3>
                        <p>学习金融、管理、市场营销，成为未来的商业领袖。</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 招生信息 -->
        <section id="admissions" class="admissions-section">
            <div class="container">
                <h2>招生信息</h2>
                <div class="admissions-content">
                    <p>2025年度秋季入学申请现已开放！我们欢迎来自世界各地的优秀学子加入我们的大家庭。</p>
                    <a href="#" class="cta-button secondary">申请指南</a>
                </div>
            </div>
        </section>
        <!-- 联系我们 -->
        <section id="contact" class="contact-section">
            <div class="container">
                <h2>联系我们</h2>
                <div class="contact-content">
                    <div class="contact-info">
                        <h3>学院地址</h3>
                        <p>中国上海市浦东新区学府路123号</p>
                        <h3>联系电话</h3>
                        <p>+86 21 1234 5678</p>
                        <h3>电子邮箱</h3>
                        <p>info@dreamacademy.edu.cn</p>
                    </div>
                    <div class="contact-form">
                        <form action="#" method="post">
                            <input type="text" placeholder="您的姓名" required>
                            <input type="email" placeholder="您的邮箱" required>
                            <textarea placeholder="留言内容" rows="5" required></textarea>
                            <button type="submit" class="cta-button">发送消息</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 梦想学院. 保留所有权利.</p>
        </div>
    </footer>
    <script src="js/script.js"></script>
</body>
</html>

CSS 代码 (`css/style.css`)

这是样式表,负责网站的所有视觉呈现。

/* --- 全局变量和基础样式 --- */
:root {
    --primary-color: #0056b3;
    --secondary-color: #f39c12;
    --text-color: #333;
    --light-gray: #f4f4f4;
    --dark-gray: #666;
    --white: #fff;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Noto Sans SC', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 {
    margin-bottom: 1rem;
    line-height: 1.2;
}
h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--primary-color);
}
img {
    max-width: 100%;
    height: auto;
}
a {
    text-decoration: none;
    color: var(--primary-color);
}
.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color), #007bff);
    color: var(--white);
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 500;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.cta-button.secondary {
    background: linear-gradient(135deg, var(--secondary-color), #e67e22);
}
/* --- 页头 --- */
.main-header {
    background: var(--white);
    box-shadow: var(--shadow);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
}
.logo img {
    height: 50px;
}
.main-nav ul {
    display: flex;
    list-style: none;
}
.main-nav ul li a {
    color: var(--text-color);
    padding: 1rem;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}
.main-nav ul li a:hover, .main-nav ul li a.active {
    color: var(--primary-color);
}
.main-nav ul li a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--secondary-color);
}
/* --- 英雄区域 --- */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/hero-bg.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    margin-top: 70px; /* 避免被固定页头遮挡 */
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease;
}
.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease 0.2s;
    animation-fill-mode: both;
}
/* --- 关于我们 --- */
.about-section {
    padding: 80px 0;
    background-color: var(--light-gray);
}
.about-content {
    display: flex;
    align-items: center;
    gap: 3rem;
}
.about-text {
    flex: 1;
}
.about-image {
    flex: 1;
}
.about-image img {
    border-radius: 10px;
    box-shadow: var(--shadow);
}
/* --- 课程设置 --- */
.courses-section {
    padding: 80px 0;
}
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.course-card {
    background: var(--white);
    padding: 2rem;
    text-align: center;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.course-card:hover {
    transform: translateY(-10px);
}
.course-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.course-card h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}
/* --- 招生信息 --- */
.admissions-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary-color), #007bff);
    color: var(--white);
    text-align: center;
}
.admissions-section h2 {
    color: var(--white);
}
.admissions-content p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 2rem auto;
}
.admissions-section .cta-button {
    background: var(--secondary-color);
}
/* --- 联系我们 --- */
.contact-section {
    padding: 80px 0;
}
.contact-content {
    display: flex;
    gap: 4rem;
}
.contact-info, .contact-form {
    flex: 1;
}
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}
/* --- 页脚 --- */
.main-footer {
    background: var(--dark-gray);
    color: var(--white);
    text-align: center;
    padding: 2rem 0;
}
/* --- 动画 --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
        text-align: center;
    }
    .main-nav ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }
    .main-nav ul li {
        padding: 0.5rem 0;
        border-bottom: 1px solid #eee;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .about-content,
    .contact-content {
        flex-direction: column;
        text-align: center;
    }
    h2 {
        font-size: 2rem;
    }
}

JavaScript 代码 (`js/script.js`)

这里添加一个简单的脚本,用于在点击导航链接时更新活动状态，并处理表单提交的提示。

document.addEventListener('DOMContentLoaded', function() {
    // 导航栏活动状态管理
    const sections = document.querySelectorAll('section');
    const navLinks = document.querySelectorAll('.main-nav a');
    window.addEventListener('scroll', () => {
        let current = '';
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            if (scrollY >= (sectionTop - 200)) {
                current = section.getAttribute('id');
            }
        });
        navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href').slice(1) === current) {
                link.classList.add('active');
            }
        });
    });
    // 联系表单提交处理
    const contactForm = document.querySelector('.contact-form form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            // 这里可以添加实际的表单提交逻辑，例如使用 Fetch API 发送数据到服务器
            // fetch('/api/contact', { ... })
            // 显示成功提示
            alert('感谢您的留言！我们会尽快与您联系。');
            // 重置表单
            this.reset();
        });
    }
});

如何使用这个模板

创建文件夹：在你的电脑上创建一个名为 school-template 的文件夹。
创建子文件夹：在 school-template 文件夹内，分别创建 css、images 和 js 三个子文件夹。
创建文件：按照上面的文件结构，创建 index.html、style.css 和 script.js 文件，并将对应的代码复制进去。
准备图片：
- 在 images 文件夹中放入一个名为 logo.png 的Logo图片。
- 放入一张高质量的图片,命名为 hero-bg.jpg，作为首页背景。
- 再放一张图片,命名为 placeholder.png，用于“关于我们”部分。
打开浏览器：用浏览器打开 index.html 文件，你就能看到一个完整的学校网站了。

如何进一步定制

修改颜色：在 style.css 文件的 root 选择器中修改 --primary-color、--secondary-color 等变量，即可改变整个网站的配色方案。
修改文字：直接在 index.html 文件中修改所有文本内容。
添加新页面：复制 index.html 文件，重命名（如 about.html），然后修改内容，并确保所有链接都指向正确的页面。
添加更多功能：可以添加一个“新闻动态”板块，或者集成一个地图显示学校位置。

这个模板为你提供了一个坚实的基础,你可以根据自己的具体需求进行修改和扩展。

（图片来源网络，侵删）

HTML5 CSS3学校模板如何适配不同设备？

文件结构

HTML 代码 (index.html)

CSS 代码 (css/style.css)

JavaScript 代码 (js/script.js)

如何使用这个模板

如何进一步定制

HTML 代码 (`index.html`)

CSS 代码 (`css/style.css`)

JavaScript 代码 (`js/script.js`)