用DIV+CSS技术设计的环保主题网站（web前端网页制作课作业）

news2024/12/23 10:55:32

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





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


<ul>
<li class="active"><a href="index.html">首页</a>
</li>
<li ><a href="jiancheng.html">简称</a></li>
<li ><a href="dingyineihan.html">定义内涵</a></li>
<li ><a href="huanjingbaohudeyiyi.html">环境保护的意义</a></li>
<li ><a href="huanbaoxingainian.html">环保新概念</a></li>
 
</ul>





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

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


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

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

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

<div class="title">
<div class="stitle"> 简称</div> 
<div class="clear"></div>
<div class="triangleup"></div>
</div>
 



</div>
<div class="jc">






<ul>
<li>
<div class="img"><img src="images/3.jpg"></div>
<div class="desc">
<div class="title">保护</div>
<div class="clear"></div>
1.1962年美国海洋生物学家蕾切尔·卡逊在《寂静的春天》一书中明确描述了农药杀虫剂DDT对环境的污染和破坏环境作用，由于该书的警示，美国政府开始对剧毒杀虫剂问<button>查看详情</button>
</div>
</li>
<li>
<div class="img"><img src="images/4.jpg"></div>
<div class="desc">
<div class="title">主要内容</div>
<div class="clear"></div>
环境保护又是指人类有意识地保护自然资源并使其得到合理的利用，防止自然环境受到污染和破坏；对受到污染和破坏的环境必须做好综合治理，以创造出适合于人类生活、工作的环<button>查看详情</button>
</div>
</li>
 
</ul>









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

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

<div class="title">
<div class="stitle"> 环境保护的意义</div> 
<div class="clear"></div>
<div class="triangleup"></div>
</div>
 



</div>
<div class="hjbhdyy">










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

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


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



<div class="desc">
其内容主要有：<br><br>（1）防治由生产和生活活动引起的环境污染，包括防治工业生产排放的“三废”（废水、废气、废渣）、粉尘、放射性物质以及产生的噪声、振动、恶臭和电磁微波辐射，交通运输活动产生的有害气体、液体、噪声，海上船舶运输排出的污染物，工农业生产和人民生活使用的有毒有害化学品，城镇生活排放的烟尘、污水和垃圾等造成的污染。</div>


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

<div class="list">
<img src="images/6.jpg" class="simg">
<img src="images/7.jpg" class="simg">
<img src="images/8.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 {
width:1200px;background:#460046;float:left;

}
.daohang .img{
width:226px;
float:left;

}

.daohang .img img{
width:200px;height:90px;
float:left;
}



.daohang ul{
width:934px;
background:#460046;float:left;
}

.daohang ul li{
float:left;
width:100px; 
text-align:center;
height:90px;line-height:90px;color:#fff;position: relative;
}


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









width:1180px;padding:10px;
float:left;
}
.jianchengliebiao ul li img
{
width:580px;padding:5px;
height:200px;float:left;
}
.jianchengliebiao ul li .title{margin:10px 0px;

}
.jianchengliebiao ul li .desc
{
width:580px;height:200px;
float:left;
text-align:left;
padding:5px;
}




.huanbaoxingainianliebiao ul
{
width:1200px;
}
.huanbaoxingainianliebiao ul li
{
width:1180px;padding:10px;
float:left;
}
.huanbaoxingainianliebiao .active
{
background:#460046;}
.huanbaoxingainianliebiao .active .title
{
color:#ffffff;
}

.huanbaoxingainianliebiao .active .desc
{
color:#ffffff;
}



.huanbaoxingainianliebiao ul li img
{
width:344px;padding:5px;
height:200px;float:left;
}
.huanbaoxingainianliebiao ul li .title{margin:10px 0px;
font-weight:bold;
font-size:16px;
}
.huanbaoxingainianliebiao ul li .desc
{
width:796px;text-align:left;float:left;
padding:5px;
margin-left:20px;
}
.huanbaoxingainianliebiao ul li button
{
display:block;
text-align:left;
padding:5px 10px;
margin-top:20px;

}

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

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

七、🎁更多干货

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

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

3.

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

在这里插入图片描述

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

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

相关文章

教你如何在优麒麟上搭建 RISC-V 交叉编译环境

教你如何在优麒麟上搭建 RISC-V 交叉编译环境

由于 RISC-V 设备价格昂贵、不易采购等诸多原因&#xff0c;许多小伙伴虽然很感兴趣&#xff0c;但仍无法参与 RISC-V 开发工作&#xff0c;今天就教大家如何在优麒麟上搭建 RISC-V 交叉编译环境&#xff0c;快学起来吧&#xff01; 交叉编译&#xff08;Cross Compile&#x…
阅读更多...
收藏 | 机器学习公共数据集集锦（附下载链接）

收藏 | 机器学习公共数据集集锦（附下载链接）

>>>深度学习Tricks&#xff0c;第一时间送达<<< &#x1f680;&#x1f680;&#x1f680;近期&#xff0c;小海带在空闲之余&#xff0c;收集整理了一批机器学习公共数据集供大家参考。 整理不易&#xff0c;小伙伴们记得一键三连喔&#xff01;&#xff0…
阅读更多...
cpu天梯图2022年11月 cpu排行榜天梯图2022

cpu天梯图2022年11月 cpu排行榜天梯图2022

一、i9-13900K 1、13900K参数&#xff1a;24核32线程&#xff0c;睿频5.8GHz&#xff0c;基础功耗125W&#xff0c;最大睿频功耗253W。 2、推荐搭配主板&#xff1a;Z790、B760、Z690、B660。 3、目前单核性能最强的一款CPU&#xff0c;拥有超强的超频能力&#xff0c;为玩家带…
阅读更多...
swift指针内存管理-引用

swift指针内存管理-引用

引用探究 首先看一个例子 那么这个 0x0000000000000003 是什么意思呢 回到swift源码 找到关键核心类型 HeapObject 就是 swift 分配内存获取到的结构类型 HeapObject 第一个8字节为 metadata, 接下来是宏 InlineRefCounts 其实 就是泛型真正类型 InlineRefCountBits 至此&am…
阅读更多...
Android性能优化方法论

Android性能优化方法论

作为一名开发&#xff0c;性能优化是永远绕不过去的话题&#xff0c;在日常的开发中&#xff0c;我们可肯定都会接触过。Android 的性能优化其实是非常成熟的了&#xff0c;成熟的套路&#xff0c;成熟的方法论&#xff0c;成熟的开源框架等等。 对于接触性能优化经验较少的开…
阅读更多...
大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…
阅读更多...
APS计划排程结果的量化评价

APS计划排程结果的量化评价

APS计划排程系统是供应链管理软件中的一种提升管理决策协助系统软件&#xff0c;它通过约束理论、运用多种多样数学分析优化计算方法、有常驻运行内存运转的互动式计算机软件。它借助于某些繁杂的数学运算方式 来处理多种多样自变量&#xff0c;使供应链管理的提升变成事实。 A…
阅读更多...
计硕3班-陈陇刚-2022222278-第二章 递归与分治策略 作业

计硕3班-陈陇刚-2022222278-第二章 递归与分治策略 作业

目录 1. 概括第二章学习内容&#xff0c;总结第二章学习心得 1.1 递归 1.1.1 递归的定义 1.1.2 递归的使用场景 1.2 分治 1.2.1 分治的定义 1.2.2 分治法使用场景 1.3 学习心得 2. 描述Fibonacci数列递归算法&#xff0c;并进行时间复杂度分析 2.1 Fibonacci数列定义 …
阅读更多...
测试人经验谈：需求不明确也能写出测试用例

测试人经验谈：需求不明确也能写出测试用例

测试人员的用例编写&#xff0c;一般基于经验和需求文档进行&#xff0c;但是很多时候项目是没有需求的&#xff0c;特别是领导的某个概念提出&#xff0c;然后开发会根据自己的理解完成&#xff0c;测试人员在没有获得任何依据和需求的情况下如何编写测试用例呢&#xff1f; …
阅读更多...
【数据结构】七种排序方法，一篇文章掌握

【数据结构】七种排序方法，一篇文章掌握

文章目录前言1. 直接插入排序1.1 画图演示1.2 直接插入排序详细步骤1.3 时间复杂度&#xff0c;空间复杂度分析2. 希尔排序2.1 具体步骤描述2.2 代码详解2.3时间复杂度,空间复杂度分析3. 选择排序3.1 画图讲解3.2 代码讲解3.3 时间复杂度,空间复杂度分析4. 快速排序4.1 画图演示…
阅读更多...
【C++初阶7-string】真方便，真舒服

【C++初阶7-string】真方便，真舒服

前言 本期浅学一下STL的stirng。 内容概览&#xff1a; STLstring 是什么为什么怎么用&#xff08;接口介绍及使用&#xff09; 博主水平有限&#xff0c;不足之处望请斧正&#xff01; 先导 STL C中非常重要的一个东西&#xff0c;STL(Standard Template Library) 标准…
阅读更多...
详解华夏银行iDo平台一体化运维的落地过程

详解华夏银行iDo平台一体化运维的落地过程

随着数字化转型的深入&#xff0c;基于中台和PaaS架构的一体化运维建设也在各行各业快速展开&#xff0c;但是如何将运维平台本身的能力与企业已有的工具能力进行中台化整合、工具场景如何联动&#xff0c;是个复杂而庞大的工程。 本次&#xff0c;史春志老师以华夏银行运维平…
阅读更多...
【Revit二次开发】元素(Element)

【Revit二次开发】元素(Element)

图元与图元类型元素元素 元素(Element)也称图元 图元作为revit建模的基础&#xff0c;数量庞大&#xff0c;关系千丝万缕。先了解图元的分类&#xff0c;将会帮助我们整理思路&#xff0c;找到功能开发的关键点。 每一个人都可以按照自己的思路将图元进行分类。建模人员可以按…
阅读更多...
vue详细教程

vue详细教程

原文链接&#xff1a;https://www.cnblogs.com/MrFlySand/p/16921017.html 02vue的安装 程序说明 1、在body中有2个counter&#xff0c;一个是id&#xff0c;一个是class。 2、创建应用&#xff0c;分别用id和class将配置对象传入 语法&#xff1a;Vue.createApp(方法名).mount…
阅读更多...
DPDK之PMD原理

DPDK之PMD原理

PMD是Poll Mode Driver的缩写&#xff0c;即基于用户态的轮询机制的驱动。本文将介绍PMD的基本原理。 在不考虑vfio的情况下&#xff0c;PMD的结构图如下&#xff1a; 图1. PMD结构图 虽然PMD是在用户态实现设备驱动&#xff0c;但还是依赖于内核提供的策略。其中uio模块&…
阅读更多...
Java 面试题 —— TCP 粘包、拆包问题

Java 面试题 —— TCP 粘包、拆包问题

Java 面试题 —— TCP 粘包、拆包问题 1、粘包、拆包问题概况 正常情况&#xff1a; ​  服务端一共接收到客户端的两个数据包&#xff0c;两个数据包各自包含完整的消息。 粘包问题&#xff1a; ​  服务端一共接收到客户端的一个数据包&#xff0c;这个数据包共包含两条…
阅读更多...
【java进阶06：数组】使用一维数组模拟栈数据结构 使用二维数组模拟酒店，酒店管理系统 Arrays工具类 冒泡排序算法、选择排序算法、二分法

【java进阶06：数组】使用一维数组模拟栈数据结构 使用二维数组模拟酒店，酒店管理系统 Arrays工具类 冒泡排序算法、选择排序算法、二分法

目录 数组 二维数组 总结 作业 Arrays工具类 数组 数组总结 及 静态初始化一维数组 /* Array:1、java语言中的数组是一种引用数据类型&#xff0c;不属于基本数据类型&#xff0c;数组的父类是Object2、数组实际上是一个容器&#xff0c;可以同时容纳多个元素&#xff08…
阅读更多...
【负荷预测、电价预测】基于神经网络的负荷预测和价格预测（Matlab代码实现）

【负荷预测、电价预测】基于神经网络的负荷预测和价格预测（Matlab代码实现）

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…
阅读更多...
Webpack DevServerExpress 中间件

Webpack DevServerExpress 中间件

前言 webpack-dev-server 底层是 express webpack-dev-middleware。 express是基础。 webpack-dev-middleware是中间件&#xff0c;以监听模式启动 webpack&#xff0c;将编译后的文件输出到内存&#xff08;使用fs-memory&#xff09;&#xff0c;沟通webpack的HRM&#xf…
阅读更多...
机器学习之特征提取

机器学习之特征提取

Question Orientied:来自论文的一个学习点 Feature extraction 定义&#xff1a; 特征提取是指使用计算机提取图像中属于特征性的信息的方法及过程。 简言之 提取图像关键信息。 特征提取出来的结果叫特征向量。 进入主题之前 普及几个常识&#xff1a; 像素的英文名称:Pixe…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023