首页html+css+js关于垃圾分类的网站代码

html+css+js关于垃圾分类的网站代码

时间: 2024-11-01 18:01:38 浏览: 23

HTML、CSS 和 JavaScript 可以结合创建一个简单的垃圾分类网站。以下是基本的步骤和示例代码： 1. HTML (结构部分)： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>垃圾分类网站</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>垃圾分类指南</h1> </header> <main> <form id="garbageForm"> <label for="type">请选择垃圾类型：</label> <select id="typeSelect"> <option value="湿垃圾">湿垃圾</option> <option value="干垃圾">干垃圾</option> <option value="可回收物">可回收物</option> <option value="有害垃圾">有害垃圾</option> </select> <button type="submit">提交分类</button> </form> <div id="result"></div> </main> <script src="scripts.js"></script> </body> </html> ``` 2. CSS (样式部分 - styles.css): ```css body { font-family: Arial, sans-serif; } form { margin-bottom: 20px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } ``` 3. JavaScript (交互部分 - scripts.js): ```javascript document.getElementById('garbageForm').addEventListener('submit', function(e) { e.preventDefault(); const selectedType = document.getElementById('typeSelect').value; const resultElement = document.getElementById('result'); if (selectedType) { resultElement.innerHTML = `您选择的是${selectedType}垃圾。`; } else { resultElement.innerHTML = '请选择垃圾类型'; } }); ``` 这个例子是一个基础的单页面应用，用户从下拉列表选择垃圾类型后，会显示相应的提示信息。实际项目可能会包含更复杂的验证和交互。

阅读全文