首页设计一个包含HTML、CSS和JavaScript代码的宠物领养系统网页界面

设计一个包含HTML、CSS和JavaScript代码的宠物领养系统网页界面

时间: 2024-10-21 22:10:57 浏览: 30

设计一个宠物领养系统的网页界面通常会结合HTML构建页面结构，CSS负责样式美化，而JavaScript则提供交互功能。以下是一个简化的例子： **HTML (结构部分):** ```html <!DOCTYPE html> <html lang="zh"> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <header> <h1>爱心宠物领养中心</h1> </header> <main id="pet-adoption">  <section class="pet-list"> <div class="pet-item" data-id="1"> <img src="pet1.jpg" alt="狗狗"> <h2>狗狗小汪</h2> <p>特点：忠诚、亲人</p> <button onclick="showDetails(1)">了解详情</button> </div>  </section> <section id="pet-detail" style="display:none;">  </section> </main> <script src="script.js"></script> </body> </html> ``` **CSS (样式部分):** ```css /* styles.css */ body { font-family: Arial, sans-serif; } header { background-color: #f0f0f0; padding: 20px; } .pet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .pet-item { border: 1px solid #ccc; padding: 10px; } ``` **JavaScript (交互部分):** ```javascript // script.js function showDetails(id) { var petDetailSection = document.getElementById('pet-detail'); petDetailSection.style.display = 'block'; // 加载并显示对应id的宠物详细数据... } ```

阅读全文