大学生期末大作业：治愈系浪浪山小妖怪主题网站开发全记录

关注

原创最新推荐文章于 2026-11-07 22:07:17 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

Pandas入门教程（十四）：数据导出全攻略——CSV、Excel、JSON、HTML、Markdown 与大数据量优化分析结果需要输出才能产生价值。本文系统讲解 Pandas 的导出能力，详解 CSV 编码处理、Excel 多 Sheet 与格式化、JSON 多种 orient、HTML/Markdown/LaTeX 文档输出，并针对百万行数据给出分块、压缩、Parquet 等优化方案，帮你按场景选对导出格式。阅读详情

一、网站描述

浪浪山小妖怪主题网站是我为HTML+CSS+JavaScript课程设计的期末大作业，一个纯原生前端实现的响应式网站。网站以虚构的动画电影《浪浪山小妖怪》为主题，采用温暖治愈的配色方案，主色调为米白、浅棕和淡橙色系，营造出温馨舒适的视觉体验。

网站包含五个完整页面：

首页：展示电影简介和主要角色
电影介绍：详细介绍电影内容和主创团队
小妖怪图鉴：展示各种小妖怪角色及其属性
幕后故事：讲述电影制作过程和创作理念
关于我们：介绍工作室信息和联系方式

整个项目完全使用原生HTML5、CSS3和JavaScript实现，没有引入任何第三方库或框架，充分展示了基础前端技术的应用能力。

二、作品简介

这个项目源于我对治愈系动画的喜爱，我希望创建一个能够带给观众温暖感受的网站。浪浪山小妖怪的世界观设定为一个充满奇幻色彩但又不失温情的山中精灵世界，每个小妖怪都有独特的性格和能力。

技术层面，这个项目重点实现了：

响应式布局：适配从手机到桌面各种屏幕尺寸
CSS动画效果：增强用户体验的交互元素
原生JavaScript功能：如图片筛选、表单验证等
语义化HTML结构：提高可访问性和SEO友好性

作为大学生课程作业，这个项目不仅满足基本要求，还额外实现了许多增强用户体验的细节，如平滑滚动、悬停效果等，体现了对前端开发的深入理解。

三、功能描述

1. 响应式布局

网站采用移动优先的设计理念，使用媒体查询(@media)实现响应式布局：

桌面端：多栏布局，充分利用屏幕空间
平板电脑：适当调整布局和字体大小
手机端：简化为单栏布局，优化触摸操作

导航栏在移动设备上会转换为汉堡菜单，提升小屏幕下的可用性。

2. 交互功能

图片筛选系统：在小妖怪图鉴页面，用户可以按类型筛选不同的小妖怪
平滑滚动：点击导航链接时实现平滑滚动到对应区域
表单验证：联系表单提供基本的客户端验证
悬停效果：卡片、按钮等元素都有精心设计的悬停动画

3. 视觉设计

配色方案：主色调#d4a373(淡橙棕)、辅色#5a4a3a(深棕)、背景色#fff9f0(米白)
字体选择：使用系统默认的无衬线字体，确保可读性
图标设计：使用SVG内联图标，保证各种分辨率下的清晰度
阴影效果：柔和的阴影增强层次感

4. 性能优化

所有图片使用SVG或Base64编码内联，减少HTTP请求
CSS和JavaScript都经过精简优化
使用CSS动画代替JavaScript动画提高性能

四、作品演示

首页展示

首页包含导航栏、欢迎横幅、电影简介和小妖怪展示区。横幅区域采用渐变色背景，搭配简洁的文字介绍和召唤按钮。

小妖怪图鉴

这个页面展示了6种不同的小妖怪角色，每种都有独特的颜色和特征。用户可以点击顶部筛选按钮按类型查看不同的小妖怪。

幕后故事时间线

采用创新的时间线设计展示电影制作历程，左右交替的布局既美观又便于阅读。

五、关键代码展示

1. 响应式导航栏实现

<header>
    <div class="container">
        <nav>
            <div class="logo">
                <img src="data:image/svg+xml;base64,..." alt="浪浪山小妖怪">
                浪浪山小妖怪
            </div>
            <div class="menu-toggle" id="menuToggle">☰</div>
            <ul class="nav-links" id="navLinks">
                <li><a href="index.html">首页</a></li>
                <!-- 其他导航项 -->
            </ul>
        </nav>
    </div>
</header>

<style>
    @media (max-width: 768px) {
        .menu-toggle {
            display: block;
        }
        
        .nav-links {
            position: fixed;
            top: 70px;
            left: -100%;
            width: 100%;
            height: calc(100vh - 70px);
            background-color: #fff9f0;
            flex-direction: column;
            transition: left 0.3s;
        }
        
        .nav-links.active {
            left: 0;
        }
    }
</style>

<script>
    const menuToggle = document.getElementById('menuToggle');
    const navLinks = document.getElementById('navLinks');
    
    menuToggle.addEventListener('click', () => {
        navLinks.classList.toggle('active');
    });
</script>

2. 小妖怪筛选系统

// 获取所有筛选按钮和小妖怪卡片
const filterBtns = document.querySelectorAll('.filter-btn');
const characterCards = document.querySelectorAll('.character-card');

// 为每个按钮添加点击事件
filterBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        // 更新按钮状态
        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        
        const filter = btn.dataset.filter;
        
        // 筛选并显示符合条件的卡片
        characterCards.forEach(card => {
            if (filter === 'all' || card.dataset.category === filter) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
});

3. 时间线布局CSS

.story-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0;
}

.story-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: #d4a373;
    transform: translateX(-50%);
}

.timeline-item:nth-child(odd) {
    padding-right: calc(50% + 30px);
    text-align: right;
}

.timeline-item:nth-child(even) {
    padding-left: calc(50% + 30px);
    text-align: left;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .story-timeline::before {
        left: 30px;
    }
    
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        padding-left: 80px;
        padding-right: 0;
        text-align: left;
    }
}

4. 卡片悬停动画

.character-card {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.character-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.character-image img {
    transition: transform 0.5s;
}

.character-card:hover .character-image img {
    transform: scale(1.1);
}