浪浪山小妖怪主题页面-关于我们页面HTML+CSS实现详解

最新推荐文章于 2025-11-24 21:21:07 发布

原创最新推荐文章于 2025-11-24 21:21:07 发布 · 723 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

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

一、页面特点

1、完整表单实现：

- 包含多种输入类型(text, email, textarea)；
- 正确的标签和属性使用；
- 必填字段验证；

2、内容结构组织：

- 清晰的三个主要内容区(关于、使命、联系)；
- 使用语义化的section和class命名；

3、用户体验考虑：

- 面包屑导航提高导航效率；
- 表单字段明确标签和验证；
- 响应式设计基础；

4、代码最佳实践：

- 模块化的CSS和JS；
- 语义化HTML结构；
- 良好的注释和结构；

二、页面效果

三、页面文档整体结构

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

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

    <!-- 页面标题 -->
    <section class="page-header">
        
    </section>

    <!-- 面包屑导航 -->
    <div class="container">
        <div class="breadcrumb">
            <a href="index.html">首页</a>
            <span>/</span>
            <a href="about.html">关于我们</a>
        </div>
    </div>

    <!-- 关于我们 -->
    <section class="about-section">
        
    </section>

    <!-- 我们的使命 -->
    <section class="mission-section">
        
    </section>

    <!-- 联系我们 -->
    <section class="contact-section">
        <div class="container">
            <div class="section-title">
                <h2>联系我们</h2>
                <p>我们期待听到您的声音</p>
            </div>
            
            <div class="contact-form">
                <form id="contactForm">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="subject">主题</label>
                        <input type="text" id="subject" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">留言</label>
                        <textarea id="message" class="form-control" required></textarea>
                    </div>
                    
                    <button type="submit" class="btn">发送消息</button>
                </form>
            </div>
        </div>
    </section>

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

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

四、HTML网页源码解析

1、头部(head)部分详解

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 浪浪山小妖怪</title>
    <link rel="stylesheet" href="./css/about.css">
</head>

字符编码：UTF-8确保中文字符正确显示；

视口设置：移动设备适配；

页面标题：明确表明是关于我们页面；

专用样式表：链接到about.css样式文件；

2、主体(body)部分详解

（1）顶部导航栏

<header>
    <!-- 导航菜单 -->
</header>

网站的统一导航栏；
使用语义化<header>标签；

（2）页面标题区

<section class="page-header">
    <!-- 主标题内容 -->
</section>

展示"关于我们"的主标题；
包含副标题或装饰元素；

（3）面包屑导航

<div class="container">
    <div class="breadcrumb">
        <a href="index.html">首页</a>
        <span>/</span>
        <a href="about.html">关于我们</a>
    </div>
</div>

清晰的导航路径：首页 > 关于我们；
使用container控制宽度和布局；

（4）关于我们部分

<section class="about-section">
    <!-- 团队介绍内容 -->
</section>

介绍"浪浪山小妖怪"的背景信息；
包含团队照片、创立故事等；

（5）我们的使命部分

<section class="mission-section">
    <!-- 使命和愿景内容 -->
</section>

展示团队的核心价值观和使命；
使用图标+文字的展示形式；

（6）联系我们部分

<section class="contact-section">
    <div class="container">
        <div class="section-title">
            <h2>联系我们</h2>
            <p>我们期待听到您的声音</p>
        </div>
        
        <div class="contact-form">
            <form id="contactForm">
                <!-- 表单字段 -->
                <button type="submit" class="btn">发送消息</button>
            </form>
        </div>
    </div>
</section>

表单详解：

整体结构：

- 使用<form>标签创建表单；
- 设置id为"contactForm"供JavaScript使用；

表单字段组：

- 每个字段使用form-group类包装；
- 包含<label>和输入控件；
- 使用form-control类统一样式；

字段类型：

- 姓名(text)；
- 邮箱(email) - 会自动验证邮箱格式；
- 主题(text)；
- 留言(textarea)；

提交按钮：

- 使用<button type="submit">；
- 添加了btn类用于样式化；

必填验证：

- 所有字段都添加了required属性；
- 浏览器会自动验证必填字段；

（7）页脚区域

<footer>
    <!-- 版权信息等 -->
</footer>

网站的统一页脚；
通常包含版权声明和辅助链接；

（8）JavaScript引入

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

专门为关于我们页面编写的脚本；
处理表单提交、动画效果等；

五、网页源码

这个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/about.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header>
        <div class="container">
            <nav>
                <div class="logo">
                    <img src="xMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMDEuOC0yNjEuN0wtMjE2LjQgMzYzLjMtMTcuNiAxNy42IDU0LjMgNTQuMyAxNy42LTE3LjYgMTI5LTEyOS4zLTE3LjYtMTcuNnpNLTY5LjktMjEuNWwtNTQuMy01NC4zIDE3LjYtMTcuNkwzMDQgMTI2LjZsMTcuNiAxNy42LTU0LjMgNTQuMy0xNy42LTE3LjZ6Ii8+PC9zdmc+" alt="浪浪山小妖怪">
                    浪浪山小妖怪
                </div>
                <div class="menu-toggle" id="menuToggle">
                    ☰
                </div>
                <ul class="nav-links" id="navLinks">
                    <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" class="active">关于我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="page-header">
        <div class="container">
            <h1>关于我们</h1>
            <p>创造温暖治愈的动画世界</p>
        </div>
    </section>

    <!-- 面包屑导航 -->
    <div class="container">
        <div class="breadcrumb">
            <a href="index.html">首页</a>
            <span>/</span>
            <a href="about.html">关于我们</a>
        </div>
    </div>

    <!-- 关于我们 -->
    <section class="about-section">
        <div class="container">
            <div class="section-title">
                <h2>我们的故事</h2>
            </div>
            
            <div class="about-content">
                <div class="about-image">
                    <img src="./images/zdzq.jpg" alt="我们的团队">
                </div>
                <div class="about-text">
                    <h3>浪浪山小妖怪工作室</h3>
                    <p>浪浪山小妖怪工作室成立于2015年，由一群热爱动画的年轻人创立。我们的使命是通过动画作品传递温暖与希望，为观众带来欢乐和治愈。</p>
                    <p>《浪浪山小妖怪》是我们的第一部动画长片，从构思到完成历时3年，凝聚了整个团队的心血。我们相信，好的动画作品不仅能娱乐观众，更能触动心灵。</p>
                    <p>工作室位于风景优美的创意园区，团队成员来自动画、美术、音乐等多个领域，共同致力于创造独特的动画世界。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 我们的使命 -->
    <section class="mission-section">
        <div class="container">
            <div class="section-title">
                <h2>我们的使命</h2>
                <p>我们相信动画的力量</p>
            </div>
            
            <div class="mission-cards">
                <div class="mission-card">
                    <div class="mission-icon"> </div>
                    <h3 class="mission-title">创造美丽</h3>
                    <p>我们致力于创造视觉上令人惊叹的动画世界，每一个场景、每一个角色都经过精心设计，为观众带来美的享受。</p>
                </div>
                
                <div class="mission-card">
                    <div class="mission-icon"> </div>
                    <h3 class="mission-title">传递温暖</h3>
                    <p>我们的作品以温暖治愈为主题，希望通过小妖怪们的故事，为观众带来心灵的慰藉和正能量。</p>
                </div>
                
                <div class="mission-card">
                    <div class="mission-icon"> </div>
                    <h3 class="mission-title">激发想象</h3>
                    <p>我们相信动画能够激发观众的想象力，特别是对孩子们来说，一个充满可能性的奇幻世界能帮助他们成长。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-section">
        <div class="container">
            <div class="section-title">
                <h2>联系我们</h2>
                <p>我们期待听到您的声音</p>
            </div>
            
            <div class="contact-form">
                <form id="contactForm">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="subject">主题</label>
                        <input type="text" id="subject" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">留言</label>
                        <textarea id="message" class="form-control" required></textarea>
                    </div>
                    
                    <button type="submit" class="btn">发送消息</button>
                </form>
            </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/about.js"></script>
</body>
</html>