大学生简单环保环境静态HTML网页设计作品 DIV布局环境介绍网页模板代码 DW学生环境网站制作成品下载 HTML5期末大作业

news2025/1/22 1:08:05

🎀 精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站效果
  • 五、🔧 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货

一、👨‍🎓网站题目

🌲环境保护、🌳 保护地球、🌴 校园环保、🌵垃圾分类、🚵🏼绿色家园、等网站的设计与制作。

二、✍️网站描述

⭐ 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△）

🏅 一套A+的网页应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站效果

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

五、🔧 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div class="main" >

<div  class="content12">
<div class="daohang">







   <ul>
    <li class="active"><a href="index.html">首页</a>
</li>
  
    <li ><a href="jieshao.html">介绍</a></li>
	
    <li ><a href="zhuyaoneirong.html">主要内容</a></li>
	
    <li ><a href="huanbaomingyan.html">环保名言</a></li>
	 
   </ul>
</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="guanggaotupian">


<div class="img">
<img src="images/1.jpg"></div>
 

</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">






<div class="title">
<div class="line"></div>
	<div class="stitle">

		<div class="sstitle">
		<div class="h2">主要内容</div>
		<span>ZHUYAONEIRONG</span>
		</div>

	</div>
</div>







	  	  </div>
<div class="zynr">







<ul>
<li>

<div class="img"><img src="images/2.jpg"></div>
<div class="text">
<div class="title">防止污染</div>
<div class="clear"></div>
<div class="desc">防止由生产和生活活动引起的环境污染、化学污染，包括防治工业生产排放的废水、废气、废渣、粉尘、放射性物质以及产生的噪声、振动、恶臭和电磁微波辐射，交通运输活动产生的有害气体、液体、噪声，海上船舶运输排出的污染物，工农业生产和人民生活使用的有毒有害化学品，城镇生活排放的烟尘、污水和垃圾等造成的污染。</div>
</div>
</li>
<li>

<div class="img"><img src="images/3.jpg"></div>
<div class="text">
<div class="title">防止破坏</div>
<div class="clear"></div>
<div class="desc">防止由建设和开发活动引起的环境破坏，包括防止由大型水利工程、公路干线、大型港口码头、机场和大型工业项目等工程建设对环境造成的污染和破坏，农垦和围湖造田活动、海上油田、海岸带和沼泽地的开发、森林和矿产资源的开发对环境的破坏和影响，新工业区、新城镇的设置和建设等对环境的破坏和污染。</div>
</div>
</li>
 
</ul>

</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">






<div class="title">
<div class="line"></div>
	<div class="stitle">

		<div class="sstitle">
		<div class="h2">环保名言</div>
		<span>HUANBAOMINGYAN</span>
		</div>

	</div>
</div>







	  	  </div>
<div class="hbmy">









<div class="list">
<img src="images/4.jpg" class="img">
<img src="images/5.jpg" class="img">
 
</div>



<div class="desc">
<br><br>手下留情，足下留青，爱护环境，人人有责。<br><br>植树造林，功在千秋。<br><br>爱祖国，护绿化，保清洁，爱家园。<br><br>保持地球生态平衡，就是保护人类自身。<br><br>人人为环保，环保为人人。<br><br>人人关心环境质量，人人参与环境保护。<br><br>珍惜资源，永续利用。<br><br>保护环境光荣，污染环境可耻。<br><br>依靠科技进步，促进环境保护。<br><br>提高环境意识，保护美好家园。</div>







 










</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">






<div class="title">
<div class="line"></div>
	<div class="stitle">

		<div class="sstitle">
		<div class="h2">介绍</div>
		<span>JIESHAO</span>
		</div>

	</div>
</div>







	  	  </div>
<div class="js">













<div class="text">


<div class="list">
<img src="images/6.jpg" class="img" >
 
</div>

环境保护就是指人类为解决现实或潜在的环境问题，协调人类与环境的关系，保障经济社会的持续发展而采取的各种行动的总称。<br><br>其方法和手段有工程技术、行政管理、也有法、经济、宣传教育……<br><br>保护环境是人类有意识地保护自然资源并使其得到合理的利用，防止自然环境受到污染和破坏；对受到污染和破坏的环境做好综合的治理，以创造出适合于人类生活、工作的环境，协调人与自然的关系，让人们做到与自然和谐相处的概念。
</div>


<div class="clear"></div>

<div class="slist">
<img src="images/7.jpg" class="simg" >
 
</div>


 














</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="dibu">

<div class="desc">
保护环境 
</div>


</div>
</div>
<div class="clear"></div></div></body></html>

💒CSS样式代码


@charset "utf-8";
*{margin:0;padding:0;}
body{margin:0 auto}
.clear{ clear:both;}
a{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
li{list-style-type:none;}
img{width:auto;max-width:100%;}
.main{width:1200px;margin:0 auto;overflow:visible;}

.content12{width:1200px;margin:0 auto;}


.daohang ul{
width:1200px;background:#660066;float:left;
}
.daohang ul li{float:left;
width:100px;padding:10px 0px; text-align:center;height:40px;line-height:40px;color:#ffffff;position: relative; }


.daohang ul li a{
color:#fff;}
 
.daohang li:hover a{
color:#fff;}


.daohang ul li.active{
}


 



.guanggaotupian
{
text-align:center;

}
.guanggaotupian img
{
width:1200px;

}





.taitou .title {
    position: relative;
    text-align: center;
    color: #fff;
	margin: 20px 0px;
    line-height: 1.5;
	width:90%;
	margin-left:10px;
margin-right:10px;

}



.taitou  .line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    top: 50%;
	    background: #ccc;
}

.taitou  .stitle {
display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 5px 6px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    z-index: 1;
	
{
padding:10px;
text-align:left;
float:left;
text-align: justify;
}
.huanbaomingyan  .list
{
text-align:center;
}



.huanbaomingyan  .img
{

width:1050px;margin:5px auto;
}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

在这里插入图片描述

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

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

相关文章

2022_TIP_DSNet

2022_TIP_DSNet

Boosting RGB-D Saliency Detection by Leveraging Unlabeled RGB Images 通过利用未标记的RGB图像来增强rgb-d显着性检测 1. 动机 1) 用于监督学习的像素级注释既昂贵又耗时。 2) 与RGB图像相比&#xff0c;成对的rgb-d图像更难以收集。 2. 解决方法 提出 Dual-Semi RG…
阅读更多...
[附源码]Python计算机毕业设计Django景区直通车服务系统

[附源码]Python计算机毕业设计Django景区直通车服务系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
智能人机交互

智能人机交互

前言 随着移动机器人越来越多地走向实 际应用&#xff0c;需要提高机器人与人类之 间的协同水平&#xff0c;实现机器人与人类的共融。 一、人机交互的三个级别 二、火星车的遥操作控制 火星车的遥操作控制&#xff08;超大时延&#xff09;&#xff1a;地面团队将命令序列发至…
阅读更多...
Linux | 网络概念理解 | 对网络的初识

Linux | 网络概念理解 | 对网络的初识

文章目录重新看待计算机体系结构软件分层的思想网络中的分层协议的理解局域网的理解MAC地址 && IP地址报头的作用端口号&#xff08;port&#xff09;重新看待计算机体系结构 计算机由硬件组成&#xff0c;而不同硬件之间要怎么通信&#xff0c;或者说要怎么进行数据的…
阅读更多...
STM32F4的串口烧录问题

STM32F4的串口烧录问题

前言&#xff1a;以前总是画F1的板子&#xff0c;第一次接触F4的芯片&#xff0c;画板子时串口接在了PB6、PB7上&#xff0c;导致烧录程序、检测芯片失败的情况。其原因是由于F1的USART1对应(PA9\PA10)&#xff0c;而F4的USART1则对应了(PA9\PA10)和(PB6\PB7)。两个对应搞得不知…
阅读更多...
linux安装jdk教程(手动安装/yum安装) 保姆级教程

linux安装jdk教程(手动安装/yum安装) 保姆级教程

yum安装jdk方式&#xff1a; 1、查询要安装jdk的版本 命令&#xff1a;yum -y list java* 2、选择你需要安装的版本号 命令&#xff1a;yum install -y 你选择的版本号 ​ 3、 查询jdk版本 命令&#xff1a;java -version (有版本证明安装成功了......) 手动安装方式&#…
阅读更多...
Kibana：运用 transform 来实现服务质量目标（SLO）的可视化

Kibana：运用 transform 来实现服务质量目标（SLO）的可视化

Kibana 是一个有用的工具&#xff0c;用于监控应用程序和服务以确保它们在指定的服务级别目标内运行。 服务质量指标 (SLI) 是服务的可衡量方面&#xff0c;例如错误代码和延迟。 服务质量目标 (SLO) 定义应用程序或服务预期如何按照 SLI 衡量的方式执行&#xff0c;并在某种程…
阅读更多...
《集体智慧编程》笔记（3 / 12）：发现群组

《集体智慧编程》笔记（3 / 12）：发现群组

Discovering Groups 文章目录监督学习和无监督学习监督学习无监督学习单词向量对博客用户进行分类对订阅源中的单词进行计数分级聚类绘制树状图列聚类K-均值聚类针对偏好的聚类获取数据和准备数据BeautifulSoup收集来自Zebo的结果定义距离度量标准对结果进行聚类以二维形式展现…
阅读更多...
二、导论——可解释性机器学习（DataWhale组队学习）

二、导论——可解释性机器学习（DataWhale组队学习）

目录引言ZFNet的网络结构可视化反卷积反池化反激活反卷积训练细节特征可视化特征演化特征不变性局部遮挡测试敏感性分析相关性分析消融实验宽度影响深度影响迁移学习能力有效性分析总结引言 纽约大学ZFNet&#xff0c;2013年ImageNet图像分类竞赛冠军模型。对AlexNet进行改进的…
阅读更多...
Redis框架（十三）：大众点评项目 达人探店 博客功能实现

Redis框架（十三）：大众点评项目 达人探店 博客功能实现

大众点评项目 达人探店 博客功能实现需求&#xff1a;达人探店 博客功能实现业务实现总结SpringCloud章节复习已经过去&#xff0c;新的章节Redis开始了&#xff0c;这个章节中将会回顾Redis实战项目 大众点评 主要依照以下几个原则 基础实战的Demo和Coding上传到我的代码仓库…
阅读更多...
送书福利！全自主IDE的《运动控制系统应用与实践》

送书福利！全自主IDE的《运动控制系统应用与实践》

功能齐全、稳定性强、简单易用的实时工控软件平台是成就工业控制的重要工具。运动控制作为工业控制领域的核心技术之一&#xff0c;在3C电子、锂电新能源、装配、激光加工、点胶、贴附、工业机器人等工业应用场景中发挥着巨大作用。 正运动技术自主自研的ZDevelop是国内少有的…
阅读更多...
腾讯工作3个月，做软件测试的一些感悟

腾讯工作3个月，做软件测试的一些感悟

普通二本计算机专业毕业&#xff0c;从毕业后&#xff0c;第一份接触测试的工作是在一家通讯小公司&#xff0c;大部分接触的工作是以功能测试为主&#xff0c;一直都是几千块钱工资&#xff0c;还一度被派出差&#xff0c;以及兼职各种产品、运维、运营的活&#xff0c;感觉自…
阅读更多...
基于FPGA的spi通信接口VHDL设计

基于FPGA的spi通信接口VHDL设计

目录 1.算法概述 2.仿真效果 3.MATLAB仿真源码 1.算法概述 SPI是串行外设接口（Serial Peripheral Interface）的缩写，是一种高速的，全双工，同步的通信总线，并且在芯片的管脚上只占用四根线，节约了芯片的管脚，同时为PCB的布
阅读更多...
Coretex_M0工程创建

Coretex_M0工程创建

本文档介绍如何创建一份基于成熟库函数的新工程&#xff01; 类似于如下的工程: 如上的MCU表示的是NXP公司封装好的关于芯片的库函数&#xff0c;BSP表示的是板级支持开发包&#xff0c;是和具体开发板外设的设备有关。 那么如果我们需要我们的工程包含这样的库函数&#xff0c…
阅读更多...
小程序在线生成平台怎么使用？

小程序在线生成平台怎么使用？

其实目前小程序在线生成平台是比较主流的&#xff0c;很多小伙伴看到一些制作小程序教学&#xff0c;都会有“这个软件怎么下载&#xff1f;”、“怎么做&#xff1f;”之类的问题。其实小程序在线生成平台一般都不需要下载的&#xff0c;它主要是在网页中打开工具进行在线制作…
阅读更多...
Jenkins在windows平台下，让Powershell、批处理可以拉起进程并保持

Jenkins在windows平台下，让Powershell、批处理可以拉起进程并保持

📢欢迎点赞 ：👍 收藏 ⭐留言 📝 如有错误敬请指正，赐人玫瑰，手留余香！📢本文作者：由webmote 原创📢作者格言：无尽的折腾后，终于又回到了起点，工控，我来了 ！前言 没有人喜欢windows平台下的自动化构建，一如多年前没人喜欢linux的桌面一样。 最近在考虑wi…
阅读更多...
Back Propagation 反向传播

Back Propagation 反向传播

文章目录3、Back Propagation 反向传播3.1 引出算法3.2 非线性函数3.3 算法步骤3.3.1 例子3.3.2 作业13.3.3 作业23.4 Tensor in PyTorch3.5 PyTorch实现线性模型3.6 作业33、Back Propagation 反向传播 B站视频教程传送门&#xff1a;PyTorch深度学习实践 - 反向传播 3.1 引…
阅读更多...
联通数科一面+二面+面谈 经验分享 base济南

联通数科一面+二面+面谈 经验分享 base济南

联通数科一面二面面谈 10.8 投递简历&#xff08;大数据开发岗位 base西安 有成都岗&#xff1f; 我怎么没看到&#xff09; 10.10-12 笔试 11.05 一面 有五六个面试官 问了问题的有两个 介绍了下项目&#xff0c;问了些每个组件的基础知识&#xff0c;都是大数据的基本八股…
阅读更多...
深聊性能测试，从入门到放弃之： Windows系统性能监控(三)任务管理器介绍及使用。

深聊性能测试，从入门到放弃之： Windows系统性能监控(三)任务管理器介绍及使用。

任务管理器1、引言2、任务管理器2.1 打开方式2.2 介绍2.2.1 定义2.2.2 进程2.2.3 性能2.2.4 应用历史记录2.2.5 启动2.2.6 用户2.2.7 详细信息2.2.8 服务3、总结1、引言 关于Windows系统性能监控的前两篇 《Windows系统性能监控(一) 性能监视器介绍及使用》《Windows系统性能…
阅读更多...
深圳IB学校哪家强？入学标准如何？

深圳IB学校哪家强？入学标准如何？

我们都知道&#xff0c;孩子就读哪所学校&#xff0c;学校开设什么课程&#xff0c;这会直接影响孩子的留学之路和未来。 所以一般情况下&#xff0c;选择国际学校都是分两步走&#xff0c;先是需要是根据孩子的个性特点去选择能够适应的课程体系&#xff0c;再根据学校开设课程…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023