浪浪山小妖怪主题页面 - 首页 HTML+CSS 实现详解

关注

原创最新推荐文章于 2026-11-07 16:47:27 发布 796 阅读 AI 写同款· GEO 优化 ›

day19 - 多列布局、flex弹性盒子布局、瀑布流布局 2009年，W3C 提出了一种新的盒子模型--Flexible Box(伸缩盒模型，又称:弹性盒子flex)，用来为盒状模型提供最大的灵活性，它可以轻松的控制:元素分布方式、元素对齐方式、元素视觉顺序采用 Flex 布局的元素，称为 Flex 容器，简称”容器”它的所有子元素称为 Flex 项目，简称”项目”任何一个容器都可以指定为 Flex 布局.box{/* 指定为flex布局 */行内元素也可以使用 Flex 布局.box{/* 指定为了flex布局 */ 阅读详情

近期，我看了浪浪山小妖怪，就想着做一个完整的浪浪山小妖怪主题网站的首页实现，使用纯HTML5和CSS3，没有引入任何第三方库，并包含响应式设计。

一、页面特点

响应式设计：适配不同屏幕尺寸，包括手机、平板和桌面设备；
治愈系配色：使用暖色调和柔和渐变，营造温馨氛围；
完整结构：包含顶部导航栏、横幅区域、电影简介、小妖怪展示区和页脚；
交互效果：悬停动画、移动端菜单、平滑滚动等；
纯原生实现：仅使用HTML5、CSS3和原生JavaScript，无任何第三方库；

二、页面效果

三、页面结构

这是一个关于"治愈系小妖怪的世界 - 浪浪山小妖怪"的网页基础结构代码。

<!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="./css/index.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header>
        
    </header>

    <!-- 横幅区域 -->
    <section class="banner">

    </section>

    <!-- 电影简介 -->
    <section class="movie-section">
        
    </section>

    <!-- 小妖怪展示区 -->
    <section class="characters-section">
        
    </section>

    <!-- 页脚 -->
    <footer>
        
    </footer>

    <script src="./js/index.js"></script>
</body>
</html>

四、HTML网页源码解析

1、文档类型声明

<!DOCTYPE html>

这是HTML5的文档类型声明，告诉浏览器这是一个HTML5文档。

2、HTML根元素

<html lang="zh-CN">

<html>是HTML文档的根元素；
lang="zh-CN"属性指定文档的主要语言是简体中文；

3、头部(head)部分

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>治愈系小妖怪的世界 - 浪浪山小妖怪</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<meta charset="UTF-8">：设置文档使用UTF-8字符编码，支持中文显示；
<meta name="viewport">：响应式设计的关键，确保网页在不同设备上正确显示；
<title>：定义网页标题，会显示在浏览器标签页上；
<link>：引入外部CSS样式表文件index.css；

4、主体(body)部分

 <body>
    <!-- 顶部导航栏 -->
    <header>
        
    </header>

    <!-- 横幅区域 -->
    <section class="banner">

    </section>

    <!-- 电影简介 -->
    <section class="movie-section">
        
    </section>

    <!-- 小妖怪展示区 -->
    <section class="characters-section">
        
    </section>

    <!-- 页脚 -->
    <footer>
        
    </footer>

    <script src="./js/index.js"></script>
</body>

主要结构元素：

<header>：通常包含网站的导航栏、logo等顶部内容；
<section class="banner">：横幅区域，通常用于展示主要视觉内容；
<section class="movie-section">：电影简介部分；
<section class="characters-section">：小妖怪角色展示区；
<footer>：页脚部分，通常包含版权信息、联系方式等；

其他说明：

每个部分目前都是空的，等待填充具体内容；
使用了语义化的HTML5标签(header, section, footer)而不是普通的div；
通过class属性为各个部分添加了有意义的类名，便于CSS样式化和JavaScript操作；

5、JavaScript引入

<script src="./js/index.js"></script>

在body末尾引入JavaScript文件，确保DOM加载完成后再执行脚本。

五、网页源码

这个HTML文档结构清晰，遵循了现代网页开发的最佳实践，包括：

语义化标签使用；
响应式设计考虑；
内容与表现分离(HTML+CSS+JS分开)；
良好的注释说明；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <meta name="description" content="公-*-号：木番薯科技">
    <meta name="author" content="木番薯科技">
    <title>治愈系小妖怪的世界 - 浪浪山小妖怪</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header>
        <div class="container">
            <nav>
                <div class="logo">
                    <img src="zLTE3LjYtMTcuNnpNLTY5LjktMjEuNWwtNTQuMy01NC4zIDE3LjYtMTcuNkwzMDQgMTI2LjZsMTcuNiAxNy42LTU0LjMgNTQuMy0xNy42LTE3LjZ6Ii8+PC9zdmc+" alt="浪浪山小妖怪">
                    浪浪山小妖怪
                </div>
                <div class="menu-toggle" id="menuToggle">
                    ☰
                </div>
                <ul class="nav-links" id="navLinks">
                    <li><a href="./index.html" class="active">首页</a></li>
                    <li><a href="./movie.html">电影介绍</a></li>
                    <li><a href="./characters.html">小妖怪图鉴</a></li>
                    <li><a href="./story.html">幕后故事</a></li>
                    <li><a href="./about.html">关于我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 横幅区域 -->
    <section class="banner">
        <div class="banner-content">
            <h1>欢迎来到浪浪山小妖怪的世界</h1>
            <p>一个充满治愈与温暖的奇幻世界，在这里，每个小妖怪都有自己独特的故事和性格</p>
            <a href="#" class="btn">探索更多</a>
        </div>
        <div class="banner-decoration decoration-1">☁️</div>
        <div class="banner-decoration decoration-2">⛰️</div>
    </section>

    <!-- 电影简介 -->
    <section class="movie-section">
        <div class="container">
            <div class="section-title">
                <h2>电影简介</h2>
            </div>
            <div class="movie-content">
                <div class="movie-poster">
                    <img src="./images/1.jpg" alt="浪浪山小妖怪电影海报">
                </div>
                <div class="movie-info">
                    <h3>浪浪山小妖怪：奇幻之旅</h3>
                    <p>《浪浪山小妖怪》是一部充满温暖与治愈的动画电影，讲述了一群生活在浪浪山的小妖怪们的日常生活和冒险故事。影片通过这些小妖怪的视角，展现了友情、勇气和成长的珍贵。</p>
                    <p>电影以精美的画面和动人的音乐，为观众呈现了一个充满想象力的世界，适合全家人一起观看。</p>
                    <div class="movie-stats">
                        <div class="stat-item">
                            <div class="number">9.2</div>
                            <div class="label">豆瓣评分</div>
                        </div>
                        <div class="stat-item">
                            <div class="number">2025</div>
                            <div class="label">上映年份</div>
                        </div>
                        <div class="stat-item">
                            <div class="number">118</div>
                            <div class="label">分钟</div>
                        </div>
                    </div>
                    <a href="#" class="btn">观看预告片</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 小妖怪展示区 -->
    <section class="characters-section">
        <div class="container">
            <div class="section-title">
                <h2>小妖怪图鉴</h2>
            </div>
            <div class="characters-grid">
                <div class="character-card">
                    <div class="character-image">
                        <img src="./images/a1.jpg" alt="小妖怪1">
                    </div>
                    <div class="character-info">
                        <h3>小猪妖</h3>
                        <p>他原本是离家在浪浪山闯荡却屡屡受挫的无名小妖</p>
                        <span class="character-tag">治愈系</span>
                    </div>
                </div>
                <div class="character-card">
                    <div class="character-image">
                        <img src="./images/a2.jpg" alt="小妖怪2">
                    </div>
                    <div class="character-info">
                        <h3>蛤蟆精</h3>
                        <p>他是小猪妖的发小，也是大王洞的底层刷锅匠</p>
                        <span class="character-tag">活泼型</span>
                    </div>
                </div>
                <div class="character-card">
                    <div class="character-image">
                        <img src="./images/a3.jpg" alt="小妖怪3">
                    </div>
                    <div class="character-info">
                        <h3>黄鼠狼精</h3>
                        <p>他原本是浪浪山里神出鬼没的黄大仙，后来加入西行小队</p>
                        <span class="character-tag">艺术型</span>
                    </div>
                </div>
                <div class="character-card">
                    <div class="character-image">
                        <img src="./images/a4.jpg" alt="小妖怪4">
                    </div>
                    <div class="character-info">
                        <h3>猩猩怪</h3>
                        <p>他是个极度社恐、超级i人，被小猪妖强行请出山，加入西行取经队伍</p>
                        <span class="character-tag">安静型</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>关于我们</h3>
                    <p>浪浪山小妖怪团队致力于创作温暖治愈的动画作品，希望通过我们的作品传递快乐与希望。</p>
                </div>
                <div class="footer-column">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="./index.html">首页</a></li>
                        <li><a href="./movie.html">电影介绍</a></li>
                        <li><a href="./characters.html">小妖怪图鉴</a></li>
                        <li><a href="./story.html">幕后故事</a></li>
                        <li><a href="./about.html">关于我们</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>联系方式</h3>
                    <ul>
                        <li>邮箱: mengchatchat@foxmail.com</li>
                        <li>公众号: 木番薯科技</li>
                        <li>获取: 网页源码↑↑↑</li>
                        <li>地址: 中国某市浪浪山创意园区</li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>关注我们</h3>
                    <div class="social-links">
                        <a href="#">微</a>
                        <a href="#">博</a>
                        <a href="#">抖</a>
                        <a href="#">音</a>
                        <a href="#">B</a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2025 木番薯科技. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="./js/index.js"></script>
</body>
</html>