当前位置： 首页 > news >正文

Web大学生网页作业成品——环保主题介绍网页网站设计与实现(HTML+CSS)（5个页面）

news 2026/2/9 0:25:37

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。🎉🎉🎉

文章目录

  • 一、作品介绍 🔥
  • 二、作品演示 ☁️
  • 三、代码目录 🏠
  • 四、网站代码 👿
    • HTML部分代码
  • 五、如何学习网页制作 ❤️
  • 六、源码获取 🏫

一、作品介绍 🔥

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有5个页面。

二、作品演示 ☁️

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录 🏠

在这里插入图片描述

四、网站代码 👿

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="./css/style.css">
</head>
<body><div class="w1000"><div class="top"><img src="./images/1.jpg" alt=""></div><div class="nav"><a href="index.html">首页</a><a href="1.html">分类原则</a><a href="2.html">垃圾种类</a><a href="3.html">分类意义</a><a href="4.html">宣传图片</a></div><div class="c"><div class="c-t">简介</div><div class="c-d cl">
<img src="./images/2.jpg" class="fr" alt=""><p>垃圾分类（Garbage classification），一般是指按一定规定或标准将垃圾分类投放、收集、运输和处理，从而转变成公共资源的一系列活动的总称。垃圾分类的目的是提高垃圾的资源价值和经济价值，减少垃圾处理量和处理设备的使用，降低处理成本，减少土地资源的消耗，具有社会、经济、生态等几方面的效益。
</p></div><div class="c-t">产生原因</div><div class="c-d cl">
<img src="./images/3.jpg" class="fl" alt=""><p class="fr">每个人每天都会扔出许多垃圾，在一些垃圾管理较好的地区，大部分垃圾会得到卫生填埋、焚烧、堆肥等无害化处理，而更多地方的垃圾则常常被简易堆放或填埋，导致臭气蔓延，并且污染土壤和地下水。垃圾无害化处理的费用是非常高的，根据处理方式的不同，处理一吨垃圾的费用约为一百元至几百元不等。人们大量地消耗资源，大规模生产，大量地消费，又大量地生产着垃圾。后果将不堪设想。
</p></div></div><div class="footer">垃圾分类 从我做起</div></div>
</body>
</html>

五、如何学习网页制作 ❤️

🙋很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深印象，不知道如何提升自己，可以去看一些视频教程，跟着视频一起学习代码，切记一定要自己手动敲一遍代码，不然就算当时看视频学会也会很容易忘记。

六、源码获取 🏫

🥇1、 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁2、看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙3、源码获取公众号，点点下方公众号进行获取吧! 网页搜索编号:E0176

相关文章：

Web大学生网页作业成品——环保主题介绍网页网站设计与实现(HTML+CSS)（5个页面）

&#x1f389;&#x1f389;&#x1f389; 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网…...

编程日记 2024/8/18 14:44:37

Qt登录窗口设计

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QIcon> //图标类 #include <QPushButton> #include <QLineEdit> //行编辑 #include <QLabel> #include <QTextEdit> #include <QMovie>class Widge…...

编程日记 2024/8/18 14:43:35

探索数据矿藏：我的AI大模型与数据挖掘实战经验分享

&#x1f680; 探索数据矿藏&#xff1a;我的AI大模型与数据挖掘实战经验分享 &#x1f496; 前言&#xff1a;数据的金矿&#xff0c;AI的翅膀 在人工智能的浪潮中&#xff0c;我有幸作为项目负责人&#xff0c;带领团队深入挖掘数据的潜力&#xff0c;利用AI大模型的力量&am…...

编程日记 2024/8/18 14:42:34

linux C语言strcat函数及相关函数

讯飞星火 strcat函数是C语言中的一个字符串处理函数，用于将一个字符串追加到另一个字符串的末尾。它的原型如下： char *strcat(char *dest, const char *src);参数说明： dest：目标字符串，即要将src字符串追加到这个字符串的末尾。src：源字符串，即要追加到dest字符串末…...

编程日记 2024/8/18 14:39:31

使用 sort 进行文本文件处理

sort 使用经验笔记 一、简介 sort 是一个命令行工具&#xff0c;用于对文本文件中的行进行排序。它广泛应用于 Unix/Linux 系统中&#xff0c;可以用来对文件的内容进行简单的排序操作&#xff0c;也可以与其他命令结合使用来完成更复杂的任务。 二、基本用法 排序文件: sor…...

编程日记 2024/8/18 14:38:30

HarmonyOS笔记4：从云数据库获取数据

移动应用获取数据的方式主要有&#xff1a; 1.从网络中获取数据接口API。 2.从华为云数据库获取云数据库的资源。 3.从移动终端直接获取本地的数据 在HarmonyOS笔记3中已经完成了方式一从网络中获取数据接口API的方式。在本篇笔记中&#xff0c;将讨论从云数据库中获取数据。 因…...

编程日记 2024/8/18 14:37:28

QT5生成独立运行的exe文件

目录 1 生成独立运行的exe文件1.1 设置工程Release版本可执行文件存储路径1.2 将工程编译成Release版本 2 使用QT5自带的windeployqt拷贝软件运行依赖项3 将程序打包成一个独立的可执行软件exe4 解决QT5 This application failed to start because no Qt platform plugin could…...

编程日记 2024/8/18 14:35:26

LabVIEW光纤水听器闭环系统

开发了一种利用LabVIEW软件开发的干涉型光纤水听器闭环工作点控制系统。该系统通过调节光源频率和非平衡干涉仪的光程差&#xff0c;实现了工作点的精确控制&#xff0c;从而提高系统的稳定性和检测精度&#xff0c;避免了使用压电陶瓷&#xff0c;使操作更加简便。 项目背景 …...

编程日记 2024/8/18 14:34:25

Shell——流程控制语句（if、case、for、while等）

在 Shell 编程中&#xff0c;流程控制语句用于控制脚本的执行顺序和逻辑。这些语句包括 if、case、for、while 等&#xff0c;它们的使用可以使脚本实现更复杂的逻辑。以下是它们的详细说明和语法结构&#xff1a; 1. if 语句 if 语句用于条件判断&#xff0c;执行符合条件的…...

编程日记 2024/8/18 14:30:20

【redis的大key问题】

在使用 Redis 的过程中&#xff0c;如果未能及时发现并处理 Big keys&#xff08;下文称为“大Key”&#xff09;&#xff0c;可能会导致服务性能下降、用户体验变差&#xff0c;甚至引发大面积故障。 本文将介绍大Key产生的原因、其可能引发的问题及如何快速找出大Key并将其优…...

编程日记 2024/8/18 14:29:18

HighPoint SSD7749M2：128TB NVMe 存储卡实现28 GB/s高速传输

HighPoint Technologies推出了一款全新的SSD7749M2 RAID卡&#xff0c;能够在标准的桌面工作站中安装多达16个M.2 SSD&#xff0c;实现高达128TB的闪存存储。该卡通过PCIe Gen4 x16接口提供高达28 GB/s的顺序读写性能。这些令人瞩目的性能规格伴随着高昂的价格标签。 #### 技术…...

编程日记 2024/8/18 14:28:17

ARM 裸机与 Linux 驱动对比及 Linux 内核入门

目录 ARM裸机代码和驱动的区别 Linux系统组成 内核五大功能 设备驱动分类 内核类型 驱动模块 驱动模块示例 Makefile配置 命令 编码辅助工具 内核中的打印函数 printk 函数 修改打印级别 ​编辑 打印级别含义 驱动多文件编译 示例 模块传递参数 命令行传递参数…...

编程日记 2024/8/18 14:26:14

0101DNS TCP fallback on UDP query timeout disabled-redission-中间件

文章目录 1.问题描述2.临时解决方案 结语 1.问题描述 Springcloud 项目&#xff0c;微服务模块使用redission&#xff0c;启动报错 DNS TCP fallback on UDP query timeout disabled. Upgrade Netty to 4.1.105 or higher.相关软件版本如下 软件版本描述springboot2.7.18spr…...

编程日记 2024/8/18 14:25:13

位运算

x1010 原码&#xff1a;000...1010 &#xff08;一共32位&#xff09; 反码&#xff1a;111...0101 &#xff08;~x&#xff09; 补码&#xff1a;111...0110 &#xff08;反码1&#xff09;&#xff08;-x&#xff09; 1、n 的二进制表示中第 k 位是几 #include<iost…...

编程日记 2024/8/18 14:24:12

MemFire Cloud是否真的可以取代后端

近年来&#xff0c;随着前端技术的迅速发展&#xff0c;前端工程师们越来越多地开始思考一个问题&#xff1a;“我还能不能不依赖后端&#xff1f;” 这种想法并非空穴来风&#xff0c;尤其是随着像MemFire Cloud这样的工具出现&#xff0c;它不仅能让开发者在没有后端的情况下…...

编程日记 2024/8/18 14:23:10

数据结构（邓俊辉）学习笔记】优先级队列 06——完全二叉堆：批量建堆

文章目录 1. 自上而下的上滤&#xff1a;算法2. 自上而下的上滤&#xff1a;效率3. 自下而上的下滤&#xff1a;算法4. 自下而上的下滤&#xff1a;实例5. 自下而上的下滤&#xff1a;效率 1. 自上而下的上滤&#xff1a;算法 在介绍过完全二叉堆标准的静态和动态操作接口之后…...

编程日记 2024/8/18 14:21:08

Java | Leetcode Java题解之第344题反转字符串

题目&#xff1a; 题解&#xff1a; class Solution {public void reverseString(char[] s) {int n s.length;for (int left 0, right n - 1; left < right; left, --right) {char tmp s[left];s[left] s[right];s[right] tmp;}} }...

编程日记 2024/8/18 14:20:07

定制开发AI智能名片O2O商城小程序：基于限量策略与个性化追求的营销创新

摘要:随着科技的飞速发展和消费者需求的日益多元化&#xff0c;传统商业模式正经历着前所未有的变革。在数字化转型的大潮中&#xff0c;定制开发AI智能名片O2O商城小程序作为一种新兴的商业模式&#xff0c;凭借其独特的个性化定制能力、高效的线上线下融合&#xff08;O2O&am…...

编程日记 2024/8/18 14:15:01

Spring MVC Controller返回json日期格式配置失效的解决办法

如题&#xff0c;Spring MVC 4.3.0版本&#xff0c;配置jackson读写json。Controller层方法返回值对象包含java.util.Date类型的属性&#xff0c;并且在applicationContext.xml中配置了jackson的日期格式&#xff1a; <mvc:annotation-driven><mvc:message-converters…...

编程日记 2024/8/18 14:13:59

3.Default Constructor的构造操作

目录 1. 问题引入 2. 4种implicitly声明的default constructor 1. 问题引入 “default constructors......在需要的时候被编译产生出来”。关键词是“在需要的时候”&#xff0c;被谁需要&#xff0c;做什么事情&#xff1f;看看下面的代码&#xff0c;然后梳理下思路。 cl…...

编程日记 2024/8/18 14:11:56

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/7 23:18:34

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2026/1/26 12:37:40

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

编程新知 2026/2/5 4:00:33

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

编程新知 2026/2/5 1:50:16

虚幻基础：角色旋转

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 移动组件使用控制器所需旋转&#xff1a;组件 使用 控制器旋转将旋转朝向运动&#xff1a;组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转&#xff1a;必须移动才能旋转&#xff0c;不移动不旋转控制器…...

编程新知 2025/11/30 0:06:07

python读取SQLite表个并生成pdf文件

代码用于创建含50列的SQLite数据库并插入500行随机浮点数据&#xff0c;随后读取数据&#xff0c;通过ReportLab生成横向PDF表格&#xff0c;包含格式化&#xff08;两位小数&#xff09;及表头、网格线等美观样式。 # 导入所需库 import sqlite3 # 用于操作…...

编程新知 2025/12/15 21:48:04

Element-Plus：popconfirm与tooltip一起使用不生效？

你们好&#xff0c;我是金金金。 场景 我正在使用Element-plus组件库当中的el-popconfirm和el-tooltip&#xff0c;产品要求是两个需要结合一起使用&#xff0c;也就是鼠标悬浮上去有提示文字&#xff0c;并且点击之后需要出现气泡确认框 代码 <el-popconfirm title"是…...

编程新知 2026/1/31 1:09:47