<!DOC
TYPE html>
<html lang="zh-en">
<head>
<meta charset="UTF-8">
<title>我的奇幻动物园</title>
<style>
/* Base styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f5f5f5;
color: #333;
}
#page {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* Header styles */
#header {
background: #4a6ea9;
color: white;
padding: 20px;
position: relative;
}
#title h1 {
margin: 0;
font-size: 2.5em;
text-transform: uppercase;
}
#title h3 {
margin: 5px 0 0;
font-size: 1em;
font-weight: normal;
}
/* Navigation */
#nav {
list-style: none;
margin: 20px 0 0;
padding: 0;
display: flex;
}
#nav li {
margin-right: 10px;
}
#nav a {
color: white;
text-decoration: none;
padding: 5px 15px;
background: #3a5a8a;
border-radius: 5px;
}
#nav a:hover, #nav a.active {
background: #2a4a7a;
}
/* Content layout */
#content {
display: flex;
padding: 20px;
}
#main {
flex: 3;
padding-right: 20px;
}
#sidebar {
flex: 1;
}
/* Animal styles */
.animal {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 30px;
border-radius: 10px;
background: white;
}
table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
img {
max-width: 300px;
height: auto;
display: block;
margin: 10px 0;
}
/* Sidebar elements */
.sidebar-box {
background: #f0f0f0;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
}
.sidebar-box h2 {
margin-top: 0;
color: #4a6ea9;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
/* Search form */
#search {
margin-bottom: 20px;
}
#search-text {
padding: 8px;
width: 70%;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
}
#search-
submit {
padding: 8px 15px;
background: #4a6ea9;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
/* Login/Register forms */
.form-container {
position: relative;
margin-bottom: 20px;
}
.form-toggle {
display: none;
}
.form-tabs {
display: flex;
margin-bottom: 10px;
}
.form-tabs label {
padding: 10px 15px;
background: #ddd;
cursor: pointer;
margin-right: 5px;
border-radius: 5px 5px 0 0;
}
.form-content {
display: none;
padding: 15px;
background: #f0f0f0;
border-radius: 0 5px 5px 5px;
}
#login-toggle:checked ~ .form-content#login-content,
#register-toggle:checked ~ .form-content#register-content {
display: block;
}
#login-toggle:checked ~ .form-tabs label[for="login-toggle"],
#register-toggle:checked ~ .form-tabs label[for="register-toggle"] {
background: #4a6ea9;
color: white;
}
.form-content input {
display: block;
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-content
button {
background: #4a6ea9;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
}
/* Footer */
footer {
background: #4a6ea9;
color: white;
padding: 20px;
text-align: center;
margin-top: 20px;
}
footer a {
color: white;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<div id="title">
<h1>我的奇幻动物园</h1>
<h3>探索神奇生物的奇妙世界</h3>
</div>
<ul id="nav">
<li><a href="#animal-list" class="active">动物目录</a></li>
<li><a href="#survey">参与投票</a></li>
<li><a href="#gallery">动物图鉴</a></li>
<li><a href="#about">关于我们</a></li>
</ul>
</div>
<div id="content">
<div id="main">
<section id="animal-list">
<h2>原创动物目录</h2>
<ol>
<li><a href="#mewbaa">Mewbaa(缪巴)</a></li>
<li><a href="#liriboo">Liriboo(灵羽飞马)</a></li>
<li><a href="#flirple">Flirple(弗利普尔)</a></li>
<li><a href="#hopbark">Hopbark (霍普巴克)</a></li>
<li><a href="#zlymph">Zlymph(兹林弗)</a></li>
</ol>
</section>
<!-- Mewbaa -->
<div class="animal" id="mewbaa">
<h3>Mewbaa(缪巴)</h3>
<p>融合猫与羊特征的灵巧生物，拥有螺旋羊角和蓬松大尾。
Mewbaa 体型与中型犬相仿，长着柔软卷毛，奶白色毛发间夹杂米黄斑纹，猫状脑袋搭配圆脸蛋、三角耳，头顶螺旋羊角，四肢修长，尾巴粗长蓬松。
它生性机警好奇，以家族群居，白天活动，善于潜伏突袭，捕食小型动物，也吃植物茎叶，夜晚在山洞或树洞栖息，
偏爱山地与森林交界区域。</p>
<table>
<tr><th>体型</th><td>中型犬大小</td></tr>
<tr><th>栖息地</th><td>山地森林交界</td></tr>
<tr><th>食性</th><td>肉食/植食</td></tr>
<tr><th>特性</th><td>群体活动，夜间栖息洞穴</td></tr>
</table>
<img src="Mewbaa.png" alt="Mewbaa 形象图">
<audio controls>
<source src="Mewbaa.mp3"
type="audio/mpeg">
您的浏览器不支持音频播放
</audio>
</div>
<!-- Liriboo -->
<div class="animal" id="liriboo">
<h3>Liriboo(灵羽飞马)</h3>
<p>
月光编织的银白飞马，翅膀扇动如夜空乐章。
Liriboo 体型中等，银白皮毛泛着蓝光，淡紫色鬃毛和尾巴带有荧光，宽大翅膀的羽毛呈蓝白渐变且带金边，蹄子小巧覆有金色鳞片。
它性格温和善良，群居且聪明，清晨和傍晚出动，以草本植物和果实为食，飞行能力强，能在空中悬停，
生活在被高山环绕、入口有迷雾的神秘山谷，那里有森林、溪流和草地。
</p>
<table>
<tr><th>体型</th><td>体长2.5米</td></tr>
<tr><th>栖息地</th><td>迷雾山谷</td></tr>
<tr><th>食性</th><td>草食</td></tr>
<tr><th>特性</th><td>空中悬停，群体防御</td></tr>
</table>
<img src="Liriboo.png" alt="Liriboo 形象图">
<audio controls>
<source src="liriboo.mp3"
type="audio/mpeg">
您的浏览器不支持音频播放
</audio>
</div>
<!-- Flirple -->
<div class="animal" id="flirple">
<h3>Flirple (弗利普尔)</h3>
<p>热带雨林中的橙色精灵，翅膀振动如风铃轻响。
Flirple 体型小巧，体长约 15 厘米，亮橙色羽毛搭配蓝色带金属光泽的翅膀边缘，小脑袋上嵌着大黑眼睛，黄色尖喙，扇形尾巴。
它喜欢群居，白天活跃，在花丛中穿梭，以花蜜和小型昆虫为食，飞行敏捷，常通过互相梳理羽毛交流，
生活在温暖湿润、植被繁茂的热带雨林。
</p>
<table>
<tr><th>体型</th><td>体长15厘米</td></tr>
<tr><th>栖息地</th><td>热带雨林</td></tr>
<tr><th>食性</th><td>花蜜/昆虫</td></tr>
<tr><th>特性</th><td>群体悬停采蜜</td></tr>
</table>
<img src="Flirple.png" alt="Flirple 形象图">
<audio controls>
<source src="flirple.mp3"
type="audio/mpeg">
您的浏览器不支持音频播放
</audio>
</div>
<!-- Hopbark -->
<div class="animal" id="hopbark">
<h3>Hopbark(霍普巴克)</h3>
<p>兔犬混血萌物，跳跃时如弹簧般灵动。
Hopbark 体长约 30 厘米，暖黄色毛发点缀着白斑，头部像小狗，后腿如兔子般强壮，前爪灵活，尾巴短而毛茸茸。
它活泼好动，群居生活，白天活动，食物包括青草、蔬菜和小型昆虫，对主人忠诚但胆小机警，
适宜生活在有草地和灌木丛的乡村、郊外，也能适应人类居住环境周边。
</p>
<table>
<tr><th>体型</th><td>体长30厘米</td></tr>
<tr><th>栖息地</th><td>草地灌木区</td></tr>
<tr><th>食性</th><td>杂食</td></tr>
<tr><th>特性</th><td>群居，胆小忠诚</td></tr>
</table>
<img src="Hopbark.png" alt="Hopbark 形象图">
<audio controls>
<source src="hopbark.mp3"
type="audio/mpeg">
您的浏览器不支持音频播放
</audio>
</div>
<!-- Zlymph -->
<div class="animal" id="zlymph">
<h3>Zlymph(兹林弗)</h3>
<p>凝胶沼泽的荧光猎手，触须共振传递神秘信息。
Zlymph 通体呈半透明凝胶状，似水母与蝾螈融合，体表有荧光蓝斑点，触须末端是吸盘状发声器。
它通过共振触须传递信息，捕猎时会喷射酸液，夜间靠集体发出的脉冲式嗡鸣导航，以硫化物为食，
栖息于腐烂红树林底部的沼气池。
</p>
<table>
<tr><th>体型</th><td>半透明凝胶状</td></tr>
<tr><th>栖息地</th><td>腐烂红树林沼泽</td></tr>
<tr><th>食性</th><td>硫化物/昆虫</td></tr>
<tr><th>特性</th><td>酸液喷射，群体嗡鸣导航</td></tr>
</table>
<img src="Zlymph.png" alt="Zlymph 形象图">
<audio controls>
<source src="Zlymphv.mp3"
type="audio/mpeg">
您的浏览器不支持音频播放
</audio>
</div>
</div>
<div id="sidebar">
<!-- Search form -->
<div id="search" class="sidebar-box">
<form method="get" action="#">
<div>
<input
type="text" name="s" id="search-text" value="" placeholder="搜索动物" />
<input
type="
submit" id="search-
submit" value="搜索" />
</div>
</form>
</div>
<!-- Login/Register forms -->
<div class="sidebar-box form-container">
<input
type="radio" id="login-toggle" name="form-toggle" class="form-toggle" checked>
<input
type="radio" id="register-toggle" name="form-toggle" class="form-toggle">
<div class="form-tabs">
<label for="login-toggle">登录</label>
<label for="register-toggle">注册</label>
</div>
<div class="form-content" id="login-content">
<input
type="text" placeholder="用户名">
<input
type="password" placeholder="密码">
<
button>登录</
button>
</div>
<div class="form-content" id="register-content">
<input
type="text" placeholder="用户名">
<input
type="email" placeholder="邮箱">
<input
type="password" placeholder="密码">
<input
type="password" placeholder="确认密码">
<
button>注册</
button>
</div>
</div>
<!-- Categories -->
<div class="sidebar-box">
<h2>动物分类</h2>
<ul>
<li><a href="#">哺乳类</a></li>
<li><a href="#">鸟类</a></li>
<li><a href="#">爬行类</a></li>
<li><a href="#">两栖类</a></li>
<li><a href="#">神秘生物</a></li>
</ul>
</div>
<!-- About -->
<div class="sidebar-box">
<h2>关于动物园</h2>
<p>奇幻动物园是
一个展示原创幻想生物的虚拟动物园，所有动物均为虚构创作，旨在激发人们对自然和想象力的热爱。</p>
</div>
</div>
</div>
<footer id="survey">
<h3>最受欢迎动物投票</h3>
<a href="survey.html">点击参与问卷投票</a>
<p>© 奇幻动物研究所</p>
</footer>
</div>
</body>
</html>
在以上代码基础上完成一下任务，可新增js文件
✅ 70分：静态网页增强（不需连接后端）
项目 分值
添加 JS 控制的卡片翻转效果（如点击显示更多信息） 15
动物信息分页展示（仅使用前端 JS） 15
使用 localStorage 记住最近浏览的动物卡 15
用 JavaScript 控制音效播放或交互（如“它叫了！”提示） 15
添加动画（如卡片入场效果、点击特效） 10
本文详细解析了H5中button标签的type属性，区分了button与submit两种类型的功能。button用于执行JS函数，而submit则会提交表单，可能导致页面刷新。
扫一扫
667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
