近期，我看了浪浪山小妖怪，就想着做一个完整的浪浪山小妖怪主题网站的小妖怪图鉴页面实现，使用纯HTML5和CSS3，没有引入任何第三方库，并包含响应式设计。
一、页面特点
1、面包屑导航的实现：
- 使用简单的HTML结构创建有效的导航路径；
- 通过CSS可以美化分隔符和链接样式；
2、语义化结构：
- 使用
header、section、footer等语义化标签； - 通过class名称明确标识各部分功能；
3、模块化设计：
- 专用CSS文件(
characters.css)； - 专用JS文件(
characters.js)； - 便于维护和扩展；
4、可访问性考虑：
- 清晰的页面结构；
- 明确的导航路径；
5、响应式基础：
- viewport设置；
- container类的使用(包含响应式布局控制)；
二、页面效果
三、页面文档整体结构
这是一个关于"治愈系小妖怪的世界 - 浪浪山小妖怪"小妖怪图鉴页面的网页基础结构代码。
<!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/characters.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="characters.html">小妖怪图鉴</a>
</div>
</div>
<!-- 小妖怪图鉴 -->
<section class="characters-section">
</section>
<!-- 页脚 -->
<footer>
</footer>
<script src="./js/characters.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/characters.css">
</head>
（1）字符编码声明：
<meta charset="UTF-8">确保正确显示中文字符；
（2）视口设置：
<meta name="viewport">使页面适配移动设备；width=device-width宽度等于设备宽度；initial-scale=1.0初始缩放比例为1:1；
（3）页面标题：
<title>标签显示为"小妖怪图鉴 - 浪浪山小妖怪"；
（4）CSS链接：
- 引入专门的角色图鉴样式表
characters.css；
2、主体(body)部分详解
（1）顶部导航栏
<header>
<!-- 导航内容将在这里添加 -->
</header>
- 通常包含网站logo、主导航菜单等；
- 使用语义化的
<header>标签；
（2）页面标题区
<section class="page-header">
<!-- 页面主标题将在这里添加 -->
</section>
- 专门用于显示"小妖怪图鉴"的大标题；
- 可能会添加背景图片或特殊样式；
（3）面包屑导航
<div class="container">
<div class="breadcrumb">
<a href="index.html">首页</a>
<span>/</span>
<a href="characters.html">小妖怪图鉴</a>
</div>
</div>
- 实际实现了导航路径：首页 > 小妖怪图鉴；
- 使用两个
<a>标签创建可点击的导航链接； <span>元素用于显示分隔符"/"；breadcrumb类专门用于样式化面包屑导航；- 包含在
container类中，可能是为了控制最大宽度和居中；
（4）小妖怪图鉴主体
<section class="characters-section">
<!-- 小妖怪角色卡片将在这里添加 -->
</section>
- 核心内容区域，将展示各种小妖怪角色；
- 可能会使用网格布局展示多个角色卡片；
- 每个卡片可能包含角色图片、名称和简介；
（5）页脚
<footer>
<!-- 页脚内容将在这里添加 -->
</footer>
- 通常包含版权信息、联系方式等；
- 使用语义化的
<footer>标签；
（6）JavaScript引入
<script src="./js/characters.js"></script>
- 引入专门为角色图鉴页面编写的JavaScript；
- 可能实现角色筛选、交互效果等功能；
- 放在body末尾确保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/characters.css">
</head>
<body>
<!-- 顶部导航栏 -->
<header>
<div class="container">
<nav>
<div class="logo">
<img src="kgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMDEuOC0yNjEuN0wtMjE2LjQgMzYzLjMtMTcuNiAxNy42IDU0LjMgNTQuMyAxNy42LTE3LjYgMTI5LTEyOS4zLTE3LjYtMTcuNnpNLTY5LjktMjEuNWwtNTQuMy01NC4zIDE3LjYtMTcuNkwzMDQgMTI2LjZsMTcuNiAxNy42LTU0LjMgNTQuMy0xNy42LTE3LjZ6Ii8+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" class="active">小妖怪图鉴</a></li>
<li><a href="./story.html">幕后故事</a></li>
<li><a href="./about.html">关于我们</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="characters.html">小妖怪图鉴</a>
</div>
</div>
<!-- 小妖怪图鉴 -->
<section class="characters-section">
<div class="container">
<div class="section-title">
<h2>浪浪山小妖怪全集</h2>
<p>点击了解更多关于每个小妖怪的故事</p>
</div>
<div class="filter-controls">
<button class="filter-btn active" data-filter="all">全部</button>
<button class="filter-btn" data-filter="healing">治愈系</button>
<button class="filter-btn" data-filter="active">活泼型</button>
<button class="filter-btn" data-filter="quiet">安静型</button>
<button class="filter-btn" data-filter="artistic">艺术型</button>
</div>
<div class="characters-grid">
<div class="character-card" data-category="healing">
<div class="character-image">
<img src="./images/j1.jpg" alt="">
<span class="character-tag">治愈系</span>
</div>
<div class="character-info">
<h3 class="character-name">小猪妖</h3>
<p class="character-description">小猪妖是浪浪山上最温柔的小妖怪，总是漂浮在空中，喜欢用云朵为其他小妖怪遮阳。它的特殊能力是制造小小的彩虹，给朋友们带来惊喜。</p>
<div class="character-stats">
<div class="stat-item">
<span class="stat-value">9.5</span>
<span>可爱度</span>
</div>
<div class="stat-item">
<span class="stat-value">7.2</span>
<span>力量</span>
</div>
<div class="stat-item">
<span class="stat-value">8.8</span>
<span>智慧</span>
</div>
</div>
</div>
</div>
<div class="character-card" data-category="active">
<div class="character-image">
<img src="./images/j2.jpg" alt="">
<span class="character-tag">活泼型</span>
</div>
<div class="character-info">
<h3 class="character-name">蛤蟆精</h3>
<p class="character-description">蛤蟆精头上长着一颗永远不会腐烂的草莓，性格活泼开朗，是浪浪山上的开心果。它喜欢帮助其他小妖怪解决问题，虽然有时候会帮倒忙。</p>
<div class="character-stats">
<div class="stat-item">
<span class="stat-value">8.8</span>
<span>可爱度</span>
</div>
<div class="stat-item">
<span class="stat-value">6.5</span>
<span>力量</span>
</div>
<div class="stat-item">
<span class="stat-value">7.9</span>
<span>智慧</span>
</div>
</div>
</div>
</div>
<div class="character-card" data-category="quiet">
<div class="character-image">
<img src="./images/j3.jpg" alt="">
<span class="character-tag">安静型</span>
</div>
<div class="character-info">
<h3 class="character-name">黄鼠狼精</h3>
<p class="character-description">黄鼠狼精是浪浪山上的水系小妖怪，性格安静内向，喜欢在湖边发呆和收集漂亮的贝壳。它能听懂水的语言，经常帮助其他小妖怪预测天气。</p>
<div class="character-stats">
<div class="stat-item">
<span class="stat-value">8.2</span>
<span>可爱度</span>
</div>
<div class="stat-item">
<span class="stat-value">5.8</span>
<span>力量</span>
</div>
<div class="stat-item">
<span class="stat-value">9.1</span>
<span>智慧</span>
</div>
</div>
</div>
</div>
<div class="character-card" data-category="artistic">
<div class="character-image">
<img src="./images/j4.jpg" alt="">
<span class="character-tag">艺术型</span>
</div>
<div class="character-info">
<h3 class="character-name">猩猩怪</h3>
<p class="character-description">猩猩怪是浪浪山上的花仙子小妖怪，能够和花朵交流，喜欢唱歌跳舞。它用花粉创造出美丽的色彩，为浪浪山增添了许多美丽的风景。</p>
<div class="character-stats">
<div class="stat-item">
<span class="stat-value">9.1</span>
<span>可爱度</span>
</div>
<div class="stat-item">
<span class="stat-value">4.5</span>
<span>力量</span>
</div>
<div class="stat-item">
<span class="stat-value">8.3</span>
<span>智慧</span>
</div>
</div>
</div>
</div>
<div class="character-card" data-category="active">
<div class="character-image">
<img src="./images/j5.jpg" alt="">
<span class="character-tag">活泼型</span>
</div>
<div class="character-info">
<h3 class="character-name">小猪妈</h3>
<p class="character-description">小猪妈是浪浪山上的调皮捣蛋鬼，总是充满活力，喜欢恶作剧。虽然有时候会惹麻烦，但它的乐观精神总能感染周围的小妖怪们。</p>
<div class="character-stats">
<div class="stat-item">
<span class="stat-value">7.5</span>
<span>可爱度</span>
</div>
<div class="stat-item">
<span class="stat-value">8.2</span>
<span>力量</span>
</div>
<div class="stat-item">
<span class="stat-value">6.7</span>
<span>智慧</span>
</div>
</div>
</div>
</div>
<div class="character-card" data-category="quiet">
<div class="character-image">
<img src="./images/j6.jpg" alt="">
<span class="character-tag">安静型</span>
</div>
<div class="character-info">
<h3 class="character-name">黑狗大王</h3>
<p class="character-description">黑狗大王是浪浪山上的星空小妖怪，夜晚时会发出柔和的光芒。它喜欢观察星星，能够预测星座的变化，是浪浪山的天文学家。</p>
<div class="character-stats">
<div class="stat-item">
<span class="stat-value">8.6</span>
<span>可爱度</span>
</div>
<div class="stat-item">
<span class="stat-value">5.2</span>
<span>力量</span>
</div>
<div class="stat-item">
<span class="stat-value">9.4</span>
<span>智慧</span>
</div>
</div>
</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>© 2025 木番薯科技. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="./js/characters.js"></script>
</body>
</html>
208
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
