HTML+CSS+JS环境保护网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

news2024/12/22 20:30:33

🎀 精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 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="w12">
<div class="daohang">




<div class="img"><img src="images/1.jpeg"></div>
 
<ul>
<li class="active"><a href="index.html">首页</a>

   
    <li ><a href="huanjingbaohu.html">环境保护</a>
      

	 </li>
    <li ><a href="fazhanqianjing.html">发展前景</a>
      

	 </li>
    <li ><a href="xinxinggainian.html">新型概念</a>
      

	 </li>
    <li ><a href="lishiyange.html">历史沿革</a>
      

	 </li>
    <li ><a href="fenxibaogao.html">分析报告</a>
      

	 </li>
    <li ><a href="zaochengyingxiang.html">造成影响</a>
      

	 </li>
    <li ><a href="juticuoshi.html">具体措施</a>
      

	 </li>
    <li ><a href="xiangguanjieri.html">相关节日</a>
      

	 </li>
    <li ><a href="xiangguanjigou.html">相关机构</a>
      

	 </li>
    <li ><a href="jiazhiyiyi.html">价值意义</a>
      

	 </li>
    <li ><a href="falvzhichi.html">法律支持</a>
      

	 </li>

</ul>





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

<div  class="w12">
<div class="gg1">


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

</div>
<div class="taitou">


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

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

<div  class="w5">
<div class="gg">




<ul>
<li>
<div class="img"><img src="images/2.jpg"></div>
</li>
<li>
<div class="img"><img src="images/3.jpg"></div>
</li>
<li>
<div class="img"><img src="images/4.jpg"></div>
</li>
<li>
<div class="img"><img src="images/5.jpg"></div>
</li>
 
</ul>

</div>
</div>

<div  class="w7">
<div class="huanjingbaohu">








<div class="text">
<div class="desc">
<div class="clear"></div>
环境保护（environmental protection），简称环保，涉及的范围广、综合性强，它涉及自然科学和社会科学的许多领域等，还有其独特的研究对象。环境保护方式包括：采取行政、法律、经济、科学技术、民间自发环保组织等等，合理利用自然资源，防止环境的污染和破坏，以求自然环境同人文环境、经济环境共同平衡可持续发展，扩大有用资源的再生产，保证社会的发展。</div>
<div class="img"><img src="images/6.jpg"></div>

</div>
 










</div>
<div class="zaochengyingxiang">








<div class="text">
<div class="desc">
<div class="clear"></div>
环境成本又称环境降级成本，是指由于经济活动造成环境污染而使环境服务功能质量下降的代价。环境降级成本分为环境保护支出和环境退化成本，环境保护支出指为保护环境而实际支付的价值，环境退化成本指环境污染损失的价值和为保护环境应该支付的价值。自然环境主要提供生存空间和生态效能，具有长期、多次使用的特征，也类似于固定资产使用特征。</div>
<div class="img"><img src="images/7.jpg"></div>

</div>
 










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

<div  class="w12">
<div class="tupianliebiao1">




<ul>
<li>
<div class="img"><img src="images/8.jpg"></div>
</li>
<li>
<div class="img"><img src="images/9.jpg"></div>
</li>
<li>
<div class="img"><img src="images/7.jpg"></div>
</li>
<li>
<div class="img"><img src="images/10.jpg"></div>
</li>
<li>
<div class="img"><img src="images/11.jpg"></div>
</li>
<li>
<div class="img"><img src="images/12.jpg"></div>
</li>
<li>
<div class="img"><img src="images/13.jpg"></div>
</li>
<li>
<div class="img"><img src="images/14.jpg"></div>
</li>
 
</ul>

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

<div  class="w12">
<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;}

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





.w5{width:500px;float:left;}


.gg ul
{
width:500px;}
.gg ul li{
width:230px;height:200px;float:left;
padding:10px;
text-align:center;
}
.gg ul li img
{
width:230px;height:200px;}







.w7{width:700px;float:left;}


.huanjingbaohu .text
{
width:700px;float:left;

margin-top:10px;
}

.huanjingbaohu .img
{
width:330px;padding:0px  5px;
float:left;
}
.huanjingbaohu  img
{
width:330px;}

.huanjingbaohu .desc
{
width:330px;float:left;

text-align:left;
padding:5px;
}





.zaochengyingxiang .text
{
width:700px;float:left;

margin-top:10px;
}

.zaochengyingxiang .img
{
width:330px;padding:0px  5px;
float:left;
}
.zaochengyingxiang  img
{
width:330px;}

.zaochengyingxiang .desc
{
width:330px;float:left;

text-align:left;
padding:5px;
}





.tupianliebiao1 ul
{float:left;
padding:10px;
text-align:center;
}
.tp ul li img
{
width:580px;height:500px;}







.falvzhichi
{
width:1200px;}
.falvzhichi .text
{

float:left;
margin-top:20px;
margin-bottom:20px;
}

.falvzhichi .img
{
width:580px;padding:0px  5px;
float:left;
}
.falvzhichi  img
{
width:580px;}

.falvzhichi .desc
{
width:580px;float:left;
text-align:left;padding:5px;
}







.tp1 ul
{
width:1200px;height:500px;}
.tp1 ul li{
width:580px;height:500px;float:left;
padding:10px;
text-align:center;
}
.tp1 ul li img
{
width:580px;height:500px;}

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

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

七、🎁更多干货

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

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

3.

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

在这里插入图片描述

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

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

相关文章

FEDformer 代码分析（2）

FEDformer 代码分析（2）

首先总结一下FEDformer里面这些这些东西&#xff0c; mean的尺寸是&#xff1a;&#xff08;1,96,7&#xff09; seasonal_init的尺寸是&#xff1a;&#xff08;1,144,7&#xff09; trend_init的尺寸是&#xff1a;&#xff08;1,144,7&#xff09; zeros的尺寸是&#x…
阅读更多...
[附源码]java毕业设计疫苗接种管理系统

[附源码]java毕业设计疫苗接种管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
四、图片特效

四、图片特效

目录一、灰度处理二、颜色反转三、马赛克四、毛玻璃五、图片融合六、边缘检测与浮雕效果1 - 边缘检测2 - 浮雕效果七、颜色映射八、油画效果一、灰度处理 使用openCV的imread方法实现 import cv2img0 cv2.imread(image0.jpg, 0) img1 cv2.imread(image0.jpg, 1) print(img0…
阅读更多...
嵌入式学习笔记（1）基本知识、C语言常用关键字、OLED

嵌入式学习笔记（1）基本知识、C语言常用关键字、OLED

STM32是ST公司基于ARM Cortex-M内核开发的32位微控制器 STM32常应用在嵌入式领域&#xff0c;如智能车、无人机、机器人、无线通信、物联网、工业控制、娱乐电子产品等 STM32功能强大、性能优异、片上资源丰富、功耗低&#xff0c;是一款经典的嵌入式微控制器 STM32F103C8T6 系…
阅读更多...
windows + anaconda 安装PySpark3.0.1

windows + anaconda 安装PySpark3.0.1

1、背景 Spark作为分布式内存计算框架&#xff0c;可以广泛应用在数据处理、分析等应用场景。因此&#xff0c;希望借助Spark高性能的处理项目中的数据&#xff0c;搭建此开发环境&#xff0c;深入了解Spark的处理能力与实现机制。 2、开发环境 在windows10上使用Anaconda作为…
阅读更多...
微信小程序使用github协作

微信小程序使用github协作

微信小程序github协作所需相关设置 1.点击开发工具右上角的版本管理初识化本地仓库&#xff1a; 2.去github新建一个仓库&#xff0c;复制仓库的ssh的url添加到仓库设置中的远程连接中&#xff1a; 3.在仓库设置中的通用里设置好自己的用户名和邮箱 4.生成ssh key 由于我们使…
阅读更多...
web前端网页制作课作业——用DIV+CSS技术设计的家乡旅游主题网站

web前端网页制作课作业——用DIV+CSS技术设计的家乡旅游主题网站

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法&#xff0c;如盒子的嵌套、浮动、margin、border、background等属性的使用&#xff0c;外部大盒子设定居中&#xff0c;内部左中右布局&#xff0c;下方横向浮动排列&#xff0c;大学学习的前端知识点和布局方式都有…
阅读更多...
Metabase学习教程：视图-3

Metabase学习教程：视图-3

掌握条形图可视化 创建条形图并使用可视化设置对其进行自定义。 我们看看创建条形图和编辑条形图的设置&#xff0c;然后谈谈堆积条形图。 创建条形图 您可以使用元数据库的示例数据库。选择新的>问题>原始数据>示例数据库。选择示例数据库的Orders表作为您的数据…
阅读更多...
腾讯T4级架构师用21个项目带你吃透379页深度学习TensorFlow实践pdf

腾讯T4级架构师用21个项目带你吃透379页深度学习TensorFlow实践pdf

前言 有人调侃我们说&#xff1a; 程序员不如送外卖。送外卖是搬运食物&#xff0c;自己是搬运代码&#xff0c;都不产出新的东西……透支体力&#xff0c;又消耗健康&#xff0c;可替代性极强&#xff0c;30岁之后就要面临被优化的危险……想跳槽&#xff0c;但是更高的平台…
阅读更多...
使用XShell、XFTP连接虚拟机或者服务器教程

使用XShell、XFTP连接虚拟机或者服务器教程

文章目录前期准备安装建立连接XFTP部分前期准备 官方网站下载 需要购买&#xff0c;但是我记得我好像是通过邮件发送过来的&#xff0c;应该是那个30天试用版&#xff0c;要是不会操作的话可以评论私我发你网盘。 安装 打开安装包(xshell / xftp &#xff0c;两个软件的安装步…
阅读更多...
SpringBoot SpringBoot 开发实用篇 6 监控 6.2 SpringBoot Admin

SpringBoot SpringBoot 开发实用篇 6 监控 6.2 SpringBoot Admin

SpringBoot 【黑马程序员SpringBoot2全套视频教程&#xff0c;springboot零基础到项目实战&#xff08;spring boot2完整版&#xff09;】 SpringBoot 开发实用篇 文章目录SpringBootSpringBoot 开发实用篇6 监控6.2 SpringBoot Admin6.2.1 可视化监控平台6.2.2 SpringBoot A…
阅读更多...
论文阅读-Joint Audio-Visual Deepfake Detection（音视频Deepfake检测）

论文阅读-Joint Audio-Visual Deepfake Detection（音视频Deepfake检测）

一、论文信息 论文名称&#xff1a;Joint Audio-Visual Deepfake Detection 会议&#xff1a;ICCV2021 作者团队&#xff1a; 二、动机与创新 动机 Visual deepfake上有许多检测方法和数据集&#xff0c;而对audio deepfake以及visual-audio两种模式之间的deepfake方法较少…
阅读更多...
mybatis配置文件

mybatis配置文件

名字&#xff1a; mybatis-config.xml 作用&#xff1a; 配置自己的数据库地址、名字、密码以及mysql驱动 ... <!--配置--> <configuration><!--属性--><properties></properties> <!--全局参数设置--><settings></settings> …
阅读更多...
力扣 73. 矩阵置零 C语言实现

力扣 73. 矩阵置零 C语言实现

题目描述&#xff1a; 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 题目链接 解题思路&#xff1a; 由于题目中提示了哈希表&#xff0c;所以本人想到的方法是建立一个哈希表分别用key和value…
阅读更多...
用HTML+CSS仿网易云音乐网站(6个页面)

用HTML+CSS仿网易云音乐网站(6个页面)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
绘制路径

绘制路径

QPainterPath&#xff08;绘制器&#xff09; QPainterPath类提供一个容器&#xff0c;可以用来创建图形并且重复使用。绘制器路径是由许多图形构建基块&#xff08;如矩形、椭圆形、直线和曲线&#xff09;组成的对象。构建基块可以连接在封闭的子路径中&#xff0c;例如作为矩…
阅读更多...
ALU——调用加法乘法模块

ALU——调用加法乘法模块

只调用加法模块的仿真图&#xff1a; &#xff08;注&#xff1a;alu_control 为十六进制 001高位加载 src2的低16位加载到高16位上 002算数右移 src1算数右移 &#xff08;高位补1&#xff09; 004逻辑右移 src1逻辑右移 &#xff08;逻辑右移直接补0&#xff09; 008逻辑左移…
阅读更多...
MagicPods(在Windows电脑上可以实现airpods2弹窗，查看单个耳机电量、充电仓电量)

MagicPods(在Windows电脑上可以实现airpods2弹窗，查看单个耳机电量、充电仓电量)

1.MagicPods的安装方式 Windows电脑下打开Microsoft Store,进入后搜索Magicpods。然后就可以点击下载。&#xff08;软件的费用是12元&#xff0c;可以先免费试用&#xff09; 有可能会出现&#xff1a;下载任何微软商店应用程序都显示错误代码: 0x80240438 解决方法&#xf…
阅读更多...
基于HTML+CSS+JS制作商城（web前端网页制作课作业）---手机主题 7页

基于HTML+CSS+JS制作商城（web前端网页制作课作业）---手机主题 7页

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业 HTML&#xff1a;结构 CSS&#…
阅读更多...
ER图到关系模型的转换和练习SQL语言

ER图到关系模型的转换和练习SQL语言

目录 一、实验要求 二、作业1解答 1&#xff0e;ER图 2&#xff0e;关系模型&#xff1a; 三、作业2解答 1. 建表并插入数据 2. 使用查询语句查询相关信息 查询计算机系男生的信息&#xff1a; 查询鹿晗的年龄 查询姓名第二个字为“丽”的同学的信息 按照性别列出男…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023