# 动物园网页设计方案 我将为您创建一个包含主页和多个子页面的动物园网站。这个方案包括： 1. 主页 (index.html) 2. 动物列表页 (animals.html) 3. 关于我们页 (about.html) 4. 联系页 (contact.html) 5. 共用样式表 (styles.css) 6. 简单的导航系统 ## 主页 (index.html) ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动物园 - 主页</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>欢迎来到动物园</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="animals.html">动物列表</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="contact.html">联系方式</a></li> </ul> </nav> </header> <main> <section> <h2>我们的特色</h2> <p>本动物园拥有各种珍稀动物，提供近距离接触自然的机会。</p> <p>开放时间：每天 9:00-17:00</p> <p>地址：北京市朝阳区自然路 123 号</p> </section> <section> <h2>最新公告</h2> <p>本月推出夜间游览活动，体验不一样的动物园！</p> </section> </main> <footer> <p>© 2023 动物园官方网站</p> </footer> </body> </html> ``` ## 动物列表页 (animals.html) ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动物园 - 动物列表</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>动物园动物列表</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="animals.html">动物列表</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="contact.html">联系方式</a></li> </ul> </nav> </header> <main> <section class="animal-list"> <h2>哺乳动物</h2> <div class="animal-item"> <img src="images/panda.jpg" alt="大熊猫"> <h3>大熊猫</h3> <p>中国国宝，以竹子为食</p> <a href="animal-detail.html?animal=panda">了解更多</a> </div> <div class="animal-item"> <img src="images/tiger.jpg" alt="东北虎"> <h3>东北虎</h3> <p>体型最大的猫科动物之一</p> <a href="animal-detail.html?animal=tiger">了解更多</a> </div> <!-- 添加更多动物 --> </section> <section class="animal-list"> <h2>鸟类</h2> <div class="animal-item"> <img src="images/peacock.jpg" alt="孔雀"> <h3>孔雀</h3> <p>以美丽的羽毛闻名</p> <a href="animal-detail.html?animal=peacock">了解更多</a> </div> <!-- 添加更多鸟类 --> </section> </main> <footer> <p>© 2023 动物园官方网站</p> </footer> </body> </html> ``` ## 关于我们页 (about.html) ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动物园 - 关于我们</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>关于我们</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="animals.html">动物列表</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="contact.html">联系方式</a></li> </ul> </nav> </header> <main> <section> <h2>我们的使命</h2> <p>保护珍稀动物，提供教育机会，促进人与自然和谐共处。</p> </section> <section> <h2>历史沿革</h2> <p>本动物园成立于1958年，经过多年发展，已成为国内领先的动物保护和研究机构。</p> </section> <section> <h2>我们的团队</h2> <p>由经验丰富的动物学家、饲养员和教育工作者组成，致力于为动物和游客提供最好的服务。</p> </section> </main> <footer> <p>© 2023 动物园官方网站</p> </footer> </body> </html> ``` ## 联系页 (contact.html) ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动物园 - 联系方式</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>联系方式</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="animals.html">动物列表</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="contact.html">联系方式</a></li> </ul> </nav> </header> <main> <section> <h2>参观信息</h2> <p><strong>地址：</strong>北京市朝阳区自然路 123 号</p> <p><strong>电话：</strong>010-12345678</p> <p><strong>邮箱：</strong>info@zoo.com</p> </section> <section> <h2>开放时间</h2> <table> <tr><th>星期</th><th>时间</th></tr> <tr><td>周一至周五</td><td>9:00-17:00</td></tr> <tr><td>周末</td><td>8:30-18:00</td></tr> <tr><td>节假日</td><td>照常开放</td></tr> </table> </section> <section> <h2>地图位置</h2> <div class="map-container"> <iframe src="https://maps.google.com/maps?q=北京市朝阳区自然路+123+号&t=m&z=15" width="100%" height="300" style="border: [2025-05-13 09:28:43 | AI写代码神器 | 2050点数解答]