HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/26562.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多层tablayout+ViewPager,NestedScrollView+ViewPager+RecyclerView,嵌套吸顶滑动冲突

先看实现的UI效果 其实就是仿BOSS的页面效果&#xff0c;第二层tab下的viewpager滑到最右边再右滑&#xff0c;就操作第一层viewpager滑动。页面上滑时把第一层tab和vp里的banner都推出界面&#xff0c;让第二层tab吸顶。 滑上去第二个tab块卡在顶部&#xff0c;如图 我混乱…

React 渲染函数render、初始化函数、更新函数运行了两次,原因为何,如何解决? React.StrictMode

文章目录 Intro官网解释解决另一篇官网文章——初始化函数或更新函数运行了两次 Intro 我在用 react 写一个 demo &#xff0c;当我在某个自定义组件的 return 语句之前加上一句log之后&#xff0c;发现&#xff1a;每次页面重新渲染&#xff0c;该行日志都打印了两次&#xf…

vue-loader

Vue Loader 是一个 webpack 的 loader&#xff0c;它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件 起步 安装 npm install vue --save npm install webpack webpack-cli style-loader css-loader html-webpack-plugin vue-loader vue-template-compiler webpack…

论文阅读Rolling-Unet,卷积结合MLP的图像分割模型

这篇论文提出了一种新的医学图像分割网络Rolling-Unet&#xff0c;目的是在不用Transformer的前提下&#xff0c;能同时有效提取局部特征和长距离依赖性,从而在性能和计算成本之间找到良好的平衡点。 论文地址&#xff1a;https://ojs.aaai.org/index.php/AAAI/article/view/2…

618购物狂欢节有哪些数码好物值得抢购?年终必备神器清单大揭秘!

一年一度的“618年中大促”即将拉开帷幕&#xff0c;大家是否已经挑选好了心仪的宝贝呢&#xff1f;那些平时心仪已久的商品&#xff0c;是否总期待着在价格最优惠时收入囊中&#xff1f;毫无疑问&#xff0c;618就是这样一个绝佳的时机&#xff0c;因为各大电商平台都会纷纷推…

Lecture2——最优化问题建模

一&#xff0c;建模 1&#xff0c;重要性 实际上&#xff0c;我们并没有得到一个数学公式——通常问题是由某个领域的专家口头描述的。能够将问题转换成数学公式非常重要。建模并不是一件容易的事&#xff1a;有时&#xff0c;我们不仅想找到一个公式&#xff0c;还想找到一个…

群晖NAS安装配置Joplin Server用来存储同步Joplin笔记内容

一、Joplin Server简介 1.1、Joplin Server介绍 Joplin支持多种方式进行同步用户的笔记数据&#xff08;如&#xff1a;Joplin自己提供的收费的云服务Joplin Cloud&#xff0c;还有第三方的云盘如Dropbox、OneDrive&#xff0c;还有自建的云盘Nextcloud、或者通过WebDAV协议来…

长沙干洗服务,打造您的专属衣橱

长沙干洗服务&#xff0c;用心呵护您的每一件衣物&#xff01;致力于为您打造专属的衣橱&#xff0c;让您的每一件衣物都焕发出独特的魅力。 我们深知每一件衣物都承载着您的故事和情感&#xff0c;因此我们会以更加细心的态度对待每一件衣物。无论是您心爱的牛仔裤&#xff0c…

sizeof和strlen

1.sizeof和strlen的对比 1.1sizeof sizeof是计算变量所占内存空间大小的&#xff0c;单位是&#xff1a;字节 如果操作数是类型的话&#xff0c;计算的是使用类型创建的变量所占内存空间的大小。 sizeof只关注占用内存空间的大小&#xff0c;不在乎内存中存放的是什么数据 …

QML Canvas 代码演示

一、文字阴影 / 发光 Canvas{id: root; width: 400; height: 400onPaint: //所有的绘制都在onPaint中{var ctx getContext("2d") //获取上下文// 绘制带阴影的文本ctx.fillStyle "#333" //设置填充颜色ctx.fillRect(0, 0, root.width, root.height…

Stability AI发布新版文生图模型:依然开源

Stability AI最近发布了Stable Diffusion 3 Medium&#xff08;简称SD3 Medium&#xff09;&#xff0c;这是其最新的文生图模型&#xff0c;被官方称为“迄今为止最先进的开源模型”。SD3 Medium的性能甚至超过了Midjourney 6&#xff0c;特别是在生成手部和脸部图像方面表现出…

一杯咖啡的艺术 | 如何利用数字孪生技术做出完美的意式浓缩咖啡?

若您对数据分析以及人工智能感兴趣&#xff0c;欢迎与我们一起站在全球视野关注人工智能的发展&#xff0c;与Forrester 、德勤、麦肯锡等全球知名企业共探AI如何加速制造进程&#xff0c; 共同参与6月20日由Altair主办的面向工程师的全球线上人工智能会议“AI for Engineers”…

可以自定义的文字识别OCR

可以自定义的文字识别OCR 什么是OCR文档自学习自定义模板单证票据信息抽取操作体验 这里提到的可以自定义的文字识别OCR &#xff0c;其实就是OCR文档自学习。 什么是OCR文档自学习 什么是OCR文档自学习呢&#xff1f;OCR文档自学习&#xff0c;是面向“无算法基础”的企业与个…

C#——字典diction详情

字典 字典: 包含一个key(键)和这个key所以对应的value&#xff08;值&#xff09;&#xff0c;字典是是无序的&#xff0c;key是唯一的&#xff0c;可以根据key获取值。 定义字典: new Diction<key的类型&#xff0c;value的类型>() 方法 添加 var dic new Dictionar…

OZON芒果店长erp,OZON平台支持什么ERP

在跨境电商的浪潮中&#xff0c;OZON平台凭借其独特的优势&#xff0c;吸引了众多卖家入驻。然而&#xff0c;随着业务规模的不断扩大&#xff0c;如何高效管理商品、处理订单、优化仓储物流等成为了卖家们亟需解决的问题。此时&#xff0c;一款强大的ERP&#xff08;企业资源规…

线性代数|机器学习-P13计算特征值和奇异值

文章目录 1. 特征值1.1 特征值求解思路1.1 相似矩阵构造 1. 特征值 1.1 特征值求解思路 我们想要计算一个矩阵的特征值&#xff0c;一般是用如下公式&#xff1a; ∣ ∣ A − λ I ∣ ∣ 0 → λ 1 , λ 2 , ⋯ , λ n \begin{equation} ||A-\lambda I||0\rightarrow \lamb…

汇聚荣科技有限公司实力强吗?

汇聚荣科技有限公司实力强吗?在当今快速发展的科技行业中&#xff0c;公司的实力往往决定了其市场竞争力和发展前景。对于汇聚荣科技有限公司而言&#xff0c;其是否具备强大的实力&#xff0c;不仅关系到自身的发展&#xff0c;也影响着投资者和合作伙伴的选择。因此&#xf…

植物大战僵尸杂交版2.1版本重磅发布!更新内容介绍讲解

植物大战僵尸杂交版2.1版&#xff0c;简直是游戏迷们的福音&#xff01;这个版本不仅更新了大量的新植物和僵尸角色&#xff0c;还加入了更多的游戏模式和挑战关卡&#xff0c;让玩家们可以更加畅快地玩耍。 植物大战僵尸杂交版V2.1 :苹果安卓 PC防闪退工具修改工具高清工具通关…

16个不为人知的资源网站,强烈建议收藏!

整理了16个不为人知的资源网站&#xff0c;涵盖了课程学习、办公技能、娱乐休闲、小说音乐等多种资源&#xff0c;强烈建议收藏&#xff01; #学习网站 1、中国大学MOOC icourse163.org/ 这是一个汇集了国内顶尖大学免费课程资源的平台&#xff0c;众多985工程院校如北京大…

将HTML转化为PDF,一键操作轻松实现高效文件转换,轻松应对多种需求场景

在信息时代的浪潮中&#xff0c;文件格式的转换已经成为我们日常工作、学习和生活中不可或缺的一部分。无论是网页内容的保存、报告的整理还是简历的发送&#xff0c;我们经常需要将HTML文档转换为PDF格式&#xff0c;以确保文件内容的完整性和可读性。然而&#xff0c;传统的转…