HTML静态网页成品作业(HTML+CSS)—— 保护环境环保介绍网页(1个页面)

news2024/11/26 23:22:25

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有1个页面

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="banner">
				<img src="./images/banner.jpg" alt="">
			</div>
			
			<div class="con">
				<div class="con-tit">
					<div class="cn">环保简介</div>
					<div class="py">huan bao jian jie</div>
				</div>
				
				<div class="con1">
					<p>
						环保,全称环境保护,是指人类为解决现实的或潜在的环境问题,协调人类与环境的关系,保障经济、社会的持续发展而采取的各种行动的总称。其方法和手段有工程技术的、行政管理的、创新研发的,也有法律的、经济的、宣传教育的等。环境保护是利用环境科学的理论和方法,协调人类与环境的关系,解决各种问题,保护和改善环境的一切人类活动的总称。包括采取行政的、法律的、经济的、科学技术的多方面的措施,合理地利用自然资源,防止环境的污染和破坏,以求保持和发展生态平衡,扩大有用自然资源的再生产,保证人类社会的发展。环境保护涉及的范围广、综合性强,它涉及自然科学和社会科学的许多领域,还有其独特的研究对象。
					</p>
					<img src="./images/jj.png" alt="">
				</div>
				
				
				<div class="con-tit">
					<div class="cn">环保措施</div>
					<div class="py">huan bao cuo shi</div>
				</div>
				<div class="con2">
					
					<div class="con2-item">
						<img src="./images/1.jpeg" alt="">
						<h2>节能减排</h2>
						<p>节能减排有广义和狭义定义之分,广义而言,节能减排是指节约物质资源和能量资源,减少废弃物和环境有害物(包括三废和噪声等)排放;狭义而言,节能减排是指节约能源和减少环境有害物排放。</p>
					</div>
					<div class="con2-item">
						<img src="./images/3.jpeg" alt="">
						<h2>垃圾分类</h2>
						<p>垃圾分类的目的是提高垃圾的资源价值和经济价值,减少垃圾处理量和处理设备的使用,降低处理成本,减少土地资源的消耗,具有社会、经济、生态等几方面的效益。</p>
					</div>
					<div class="con2-item">
						<img src="./images/2.png" alt="">
						<h2>绿色出行</h2>
						<p>绿色出行就是采用对环境影响较小的出行方式。既节约能源、提高能效、减少污染,又益于健康、兼顾效率的出行方式。多乘坐公共汽车、地铁等公共交通工具,合作乘车,环保驾车,或者步行、骑自行车等。</p>
					</div>
				</div>
			</div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

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

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

相关文章

公检法部门保密网文件导出,这样做才是真正的安全又便捷

公检法是司法机关的核心组成&#xff0c;也是社会管理的重要组成&#xff0c;公检法部门的业务中涉及大量的居民数据、个人隐私、司法案件等信息&#xff0c;因此&#xff0c;数据的安全性至关重要。 根据我国法律要求&#xff0c;同时基于对数据的保护需要&#xff0c;我国的公…

Vue06-el与data的两种写法

一、el属性 用来指示vue编译器从什么地方开始解析 vue的语法&#xff0c;可以说是一个占位符。 1-1、写法一 1-2、写法二 当不使用el属性的时候&#xff1a; 两种写法都可以。 v.$mount(#root);写法的好处&#xff1a;比较灵活&#xff1a; 二、data的两种写法 2-1、对象式…

discuz点微同城源码34.7+全套插件+小程序前端

discuz点微同城源码34.7全套插件小程序前后端 模板挺好看的 带全套插件 自己耐心点配置一下插件 可以H5可以小程序

重磅就业报告前美股涨势消减,标普暂别纪录高位,英伟达盘中闪崩近6%,欧央行降息预期“退烧”,欧元跳涨

标普纳指创盘中历史新高后转跌&#xff0c;道指三连涨至近两周新高&#xff1b;芯片股指和台积电美股跌落纪录高位&#xff0c;英伟达三日收创历史新高后回落&#xff1b;游戏驿站盘中一度暴拉50%。中概股指回落&#xff0c;财报后蔚来收跌6.8%。欧央行会后&#xff0c;欧元盘中…

Dvws靶场

文章目录 一、XXE外部实体注入二、No-SQL注入三、Insecure Direct Object Reference四、Mass Assignment五、Information Disclosure六、Command Injection七、SQL注入 一、XXE外部实体注入 访问http://192.168.92.6/dvwsuserservice?wsdl&#xff0c;发现一个SOAP服务。在SO…

Golang | Leetcode Golang题解之第136题只出现一次的数字

题目&#xff1a; 题解&#xff1a; func singleNumber(nums []int) int {single : 0for _, num : range nums {single ^ num}return single }

【微信小程序】页面事件

下拉刷新 上拉触底 上拉触底距离指的是触发上拉触底事件时&#xff0c;滚动条距离页面底部的距离。 可以在全局或页面的json配置文件中&#xff0c;通过onReachBottomDistance属性来配置上拉触底的距离。 小程序默认的触底距离是50x,在实际开发中&#xff0c;可以根据自己的需…

三石峰汽车生产厂的设备振动检测项目案例

汽车生产厂的设备振动检测项目 ----天津三石峰科技&#xff08;http://www.sange-cbm.com&#xff09; 汽车产线有很多传动设备需要长期在线运行&#xff0c;会出现老化、疲劳、磨损等问题&#xff0c;为了避免意外停机造成损失&#xff0c;需要加装一些健康监测设备&#xf…

002.数据分析_Pandas初识

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

基于pulseaudio实现一个边录边播的demo

文章目录 前言一、主要APIpa_simple_newpa_simple_readpa_simple_write 二、C代码实现三、注意事项1、必须装有 libpulsedev 包2、编译方式3、运行说明 前言 通过上一讲&#xff0c;我们实现了一个加载pulseaudio的module-loopback的功能来实现侦听&#xff0c;那么除了加载模…

软件杯 题目:基于深度学习卷积神经网络的花卉识别 - 深度学习 机器视觉

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基…

【Python深度学习系列】网格搜索神经网络超参数:批量大小和迭代周期数(案例+源码)

这是我的第297篇原创文章。 一、引言 在深度学习中&#xff0c;超参数是指在训练模型时需要手动设置的参数&#xff0c;它们通常不能通过训练数据自动学习得到。超参数的选择对于模型的性能至关重要&#xff0c;因此在进行深度学习实验时&#xff0c;超参数调优通常是一个重要的…

C++初阶学习第十一弹——探索STL奥秘(六)——深度刨析list的用法和核心点

前言&#xff1a; 在前面&#xff0c;我们已经学习了STL中的string和vector&#xff0c;现在就来讲解STL中的最后一个部分——list的使用及其相关知识点&#xff0c;先说明一点&#xff0c;因为我们之前已经讲过了string和vector的接口函数等用法&#xff0c;list的这些用法与它…

【Python报错】已解决IndentationError: expected an indented block

解决Python报错&#xff1a;IndentationError: expected an indented block Python是一种非常注重可读性的编程语言&#xff0c;其中缩进是语法的一部分。如果你在使用Python时遇到了IndentationError: expected an indented block的错误&#xff0c;这意味着你的代码缩进不正确…

Bandizip 专业版正版激活码 - 超好用文件解压缩工具

要说新电脑必装的软件&#xff0c;一定少不了解压缩工具。面对各式各样的压缩包&#xff0c;总要有一个速度快、稳定安全、功能多、支持格式广的工具才行。 好多用户推荐&#xff0c;用过都说好的 Win 端解压缩工具&#xff1a;Bandizip 值得你一试&#xff01; 无论是解压速度…

Python必会的UnitTest单元测试框架详解单元测试框架

用Python搭建自动化测试框架&#xff0c;我们需要组织用例以及测试执行&#xff0c;这里博主推荐Python的标准库——UnitTest。 什么是UnitTest框架 UnitTest单元测试框架详解是xUnit系列框架中的一员&#xff0c;如果你了解xUnit的其他成员&#xff0c;那你用UnitTest单元测试…

【Python报错】已解决AttributeError: ‘function‘ object has no attribute ‘read‘

解决Python报错&#xff1a;AttributeError: ‘function’ object has no attribute ‘read’ 在使用Python进行文件操作时&#xff0c;我们经常使用open函数来打开文件&#xff0c;并使用read方法来读取文件内容。如果你遇到了AttributeError: function object has no attribu…

DL4YHF频率计折腾记

DL4YHF大佬原创的频率计https://www.qsl.net/dl4yhf/freq_counter/freq_counter.html有很多种魔改型号&#xff0c;各位大佬都开源了代码。 DL4YHF频率计电路十分简洁&#xff0c;本来想自己DIY一个&#xff0c;动手之前在淘宝一搜&#xff0c;果然没有让我失望&#xff0c;一…

Linux驱动应用编程(三)UART串口

本文目录 前述一、手册查看二、命令行调试串口1. 查看设备节点2. 使用stty命令设置串口3. 查看串口配置信息4. 调试串口 三、代码编写1. 常用API2. 例程线程优化 前述 在开始实验前&#xff0c;请一定要检查测试好所需硬件是否使用正常&#xff0c;不然调试过程中出现的问题&am…

[Algorithm][动态规划][两个数组的DP][正则表达式匹配][交错字符串][两个字符串的最小ASCII删除和][最长重复子数组]详细讲解

目录 1.正则表达式匹配1.题目链接2.算法原理详解3.代码实现 2.交错字符串1.题目链接2.算法原理详解3.代码实现 3.两个字符串的最小ASCII删除和1.题目链接2.算法原理详解3.代码实现 4.最长重复子数组1.题目链接2.算法原理详解3.代码实现 1.正则表达式匹配 1.题目链接 正则表达…