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…

HOW - 锚点(Anchor)导航

目录 创建锚点导航目录结构页面内容 说明样式和体验优化关键点总结 在Web开发中&#xff0c;锚点&#xff08;Anchor&#xff09;通常用于创建页面内的导航链接&#xff0c;使用户可以点击链接跳转到页面的特定部分。这通常通过HTML中的id属性和链接中的哈希片段实现。 以下是…

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…

使用nmcli命令创建、删除bond

前言 在之前的文章中&#xff0c;描述的创建bond的方式&#xff0c;是使用配置文件的方式&#xff0c;在创建bond的时候创建一个对应的配置文件&#xff0c;修改、删除都操作此配置文件&#xff0c;这种方式实现bond没有问题&#xff0c;但是对于某些系统下&#xff0c;bond灵…

用链表实现的C语言队列

一、队列概述 在数据结构中&#xff0c;队列是一种先进先出&#xff08;FIFO&#xff09;的线性表。它在许多应用场景中非常有用&#xff0c;例如任务调度、进程管理、资源管理等。队列是一种重要的数据结构&#xff0c;其主要特点是先进先出&#xff08;FIFO, First In First …

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

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

python datetime time timedelta

datetime 参考&#xff1a;https://blog.csdn.net/lovedingd/article/details/134929553 time timedelta 参考&#xff1a;https://geek-docs.com/python/python-ask-answer/981_python_formatting_timedelta_objects.html timedelta 是 Python 中的一个类&#xff0c;用于…

怎样为Flask服务器配置跨域资源共享

为了在 Flask 服务器中配置跨域资源共享&#xff08;CORS&#xff09;&#xff0c;你可以使用 flask-cors 扩展。这个扩展可以帮助你轻松地设置 CORS 规则&#xff0c;从而允许你的 Flask 服务器处理来自不同源的请求。 以下是配置 CORS 的步骤&#xff1a; 安装 flask-cors …

Lecture2——最优化问题建模

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

ansys有限元分析

1.悬臂梁 /prep7 ! 定义单元类型 et,1,beam4 ! 定义材料属性 mp,ex,1,200e9 ! 弹性模量 mp,prxy,1,0.3 ! 泊松比 ! 定义截面属性 sectype,1,beam,rect ! 定义矩形截面 secdata,0.1,0.1 ! 截面宽度和高度 ! 创建节点 n,1,0,0,0 n,2,2,0,0 n,3,4,0,0 n,4,6,0,0 n,5,8,0,…

什么叫做数据字典

数据字典是数据库或信息系统中用来存储关于数据的信息的集合。它包括了数据项、数据结构、数据流、数据存储、处理逻辑等方面的定义和描述。数据字典为系统的分析、设计和维护提供了有关数据的信息,是数据管理和数据维护的重要工具。 通俗地说,数据字典就像是一本“字典”,…

群晖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;特别是在生成手部和脸部图像方面表现出…

前端开发经常用到网站和方法

1、大屏设计相关 组件&#xff1a;介绍 | DataV echarts&#xff1a;Apache ECharts 大屏设计模板&#xff1a;大屏模板 常用图表库&#xff1a;常用图表库 2、UI框架 pc端 element-ui&#xff1a;Element 移动端 3、在线工具 免费版 在线流程图&#xff1a;在线画图工具…

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

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