一、作品介绍
HTML+CSS+JS制作一个环保垃圾分类网站，包含首页、垃圾分类指南页、环保知识页、回收点地图页、积分商城页、登录页等6个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。
二、页面结构
1. 顶部横幅导航区
包含网站Logo、主导航菜单（首页、分类指南、环保新闻、社区互动、关于我们）和搜索功能
2. 垃圾分类主视觉区
大型交互式分类展示区，显示四大类垃圾（可回收物、厨余垃圾、有害垃圾、其他垃圾）的图标和简要说明
3. 快速分类查询工具
搜索框设计，用户可以输入物品名称快速查询其所属分类，配有语音识别输入功能和物品识别扫描功能
4. 实时互动区
展示用户分类积分排行榜、每日环保小知识、垃圾分类小游戏入口
5. 分类指南信息流
图文并茂的常见物品分类指南，包含详细分类说明和注意事项，支持滚动加载更多
6. 环保数据统计区
展示当前网站用户参与度、正确分类率、累计减少碳排放等数据可视化图表
7. 底部信息区
包含网站介绍、联系方式、合作伙伴、相关链接等信息
三、作品演示
四、代码目录
五、首页代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>环保垃圾分类网站 - 首页</title>
<link type="text/css" href="css/family.css" rel="stylesheet" />
<link type="text/css" href="css/all.min.css" rel="stylesheet" />
</head>
<body>
<div class="water-mark water-mark-left">
公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span>
</div>
<div class="water-mark water-mark-right">
公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span>
</div>
<div class="min-h-screen bg-gray-50">
<header class="bg-white shadow-sm">
<nav class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-8">
<h1 class="text-2xl font-['Pacifico']">logo</h1>
<div class="hidden md:flex space-x-8">
<a href="./index.html" class="text-custom hover:text-custom/80">首页</a>
<a href="./guide.html" class="text-gray-600 hover:text-custom">垃圾分类指南</a>
<a href="./knowledge.html" class="text-gray-600 hover:text-custom">环保知识</a>
<a href="./map.html" class="text-gray-600 hover:text-custom">回收点地图</a>
<a href="./points-mall.html" class="text-gray-600 hover:text-custom">积分商城</a>
</div>
</div>
<div class="flex items-center space-x-4">
<a href="./login.html">
<button
class="!rounded-button px-4 py-2 text-custom border border-custom hover:bg-custom hover:text-white">登录</button>
</a>
<button class="!rounded-button px-4 py-2 bg-custom text-white hover:bg-custom/90">注册</button>
</div>
</div>
</nav>
</header>
<main>
<section class="relative h-[500px] overflow-hidden">
<img src="./images/b1.jpg"
class="w-full h-full object-cover object-center" alt="环保banner" />
<div class="absolute inset-0 bg-black/30 flex items-center justify-center">
<div class="text-center text-white">
<h2 class="text-4xl font-bold mb-4">让地球更美好，从垃圾分类开始</h2>
<p class="text-xl mb-8">共同参与环保行动，创造可持续发展的未来</p>
<button class="!rounded-button px-6 py-3 bg-custom text-white text-lg hover:bg-custom/90">
立即开始分类
</button>
</div>
</div>
</section>
<section class="container mx-auto px-4 py-16">
<h2 class="text-3xl font-bold text-center mb-12">垃圾分类指南</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="bg-white rounded-lg shadow-md p-6 text-center">
<img src="./images/f1.jpg"
class="w-24 h-24 mx-auto mb-4 rounded-full" alt="厨余垃圾" />
<h3 class="text-xl font-semibold mb-2">厨余垃圾</h3>
<p class="text-gray-600">包括剩菜剩饭、果皮、蛋壳等易腐烂的生物质废物</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 text-center">
<img src="./images/f2.jpg"
class="w-24 h-24 mx-auto mb-4 rounded-full" alt="可回收物" />
<h3 class="text-xl font-semibold mb-2">可回收物</h3>
<p class="text-gray-600">包括废纸、塑料、玻璃、金属和布料等可以回收利用的物品</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 text-center">
<img src="./images/f3.jpg"
class="w-24 h-24 mx-auto mb-4 rounded-full" alt="有害垃圾" />
<h3 class="text-xl font-semibold mb-2">有害垃圾</h3>
<p class="text-gray-600">包括废电池、废灯管、过期药品等对环境有害的废弃物</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 text-center">
<img src="./images/f4.jpg"
class="w-24 h-24 mx-auto mb-4 rounded-full" alt="其他垃圾" />
<h3 class="text-xl font-semibold mb-2">其他垃圾</h3>
<p class="text-gray-600">包括砖瓦陶瓷、渣土、卫生间废纸等难以回收的废弃物</p>
</div>
</div>
</section>
<section class="bg-white py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">环保成果</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="text-4xl font-bold text-custom mb-2">98.5%</div>
<p class="text-gray-600">垃圾分类准确率</p>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-custom mb-2">50,000+</div>
<p class="text-gray-600">活跃用户数量</p>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-custom mb-2">1,000吨</div>
<p class="text-gray-600">每月回收垃圾总量</p>
</div>
</div>
</div>
</section>
<section class="container mx-auto px-4 py-16">
<h2 class="text-3xl font-bold text-center mb-12">最新环保资讯</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="./images/z1.jpg"
class="w-full h-48 object-cover" alt="社区活动" />
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">社区环保日活动圆满成功</h3>
<p class="text-gray-600 mb-4">超过200位居民参与此次环保日活动，共同学习垃圾分类知识</p>
<a href="#" class="text-custom hover:text-custom/80">阅读更多 →</a>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="./images/z2.jpg"
class="w-full h-48 object-cover" alt="技术创新" />
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">智能垃圾分类技术创新</h3>
<p class="text-gray-600 mb-4">新型AI识别系统提高垃圾分类效率，准确率达98%</p>
<a href="#" class="text-custom hover:text-custom/80">阅读更多 →</a>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="./images/z3.jpg"
class="w-full h-48 object-cover" alt="环保教育" />
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">环保教育进校园</h3>
<p class="text-gray-600 mb-4">青少年环保意识教育计划启动，覆盖100所学校</p>
<a href="#" class="text-custom hover:text-custom/80">阅读更多 →</a>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4">关于我们</h3>
<p class="text-gray-400">致力于推广环保理念，提供专业的垃圾分类指导服务</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">快速链接</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">垃圾分类指南</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">环保知识</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">回收点地图</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">积分商城</a></li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">联系方式</h3>
<ul class="space-y-2">
<li class="text-gray-400">电话：400-888-8888</li>
<li class="text-gray-400">邮箱：contact@recycling.com</li>
<li class="text-gray-400">地址：北京市朝阳区环保路88号</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">关注我们</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white text-2xl">
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white text-2xl">
<i class="fab fa-weibo"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white text-2xl">
<i class="fab fa-qq"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>© 2024 环保垃圾分类网站. 保留所有权利.</p>
</div>
</div>
</footer>
</div>
</body>
</html>六、获取代码
内附源码，含6个页面。欢迎留言，欢迎关注。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
