269. 大学生HTML期末大作业 ―【保护环境环保主题网页首页(1页)】 Web前端网页制作 html5+css3_小王想在网页中添加一段环保公益视频,以下操作步骤正确的是( ) ①在 front page-优快云博客

♬♬♬欢迎光临我的优快云！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的【建议收藏】这篇文章末尾添加我微信...

【建议收藏】40种主题网页案例大集合 Web前端大学生期末大作业 HTML+CSS+JS-优快云博客

提示：以下是本篇文章正文内容，下面案例供参考：

一、网页概述

本实例应用html5+css3，div+css布局，代码精简。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含1个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" type="text/css" href="./css/index.css"/>
       <title>环保首页</title>
   </head>
   <body>
       <div class="all auto">
           <div class="header auto"></div>
           <ul class="banner auto">
               <li>首页</li>
               <li>环保措施</li>
               <li>环境现状</li>
               <li>联系我们</li>
           </ul>
           <div class="con auto">
               <div class="con1">
                   <div class="con1-left">
                       <h2>环保措施</h2>
                       <h3>（1）空调冬18夏26 全国节电上亿度冬季的空调温度调至18度或以下。</h3>
                       <P>如您感觉有些寒冷可以多加件衣服，如此简单的举措就可以节约电力，从而减少燃煤发电排放出的二氧化碳等温室气体，减缓气候变暖。夏季的空调温度调至26度或以上。大城市的空调负荷约占盛夏最大供电负荷的40%－50%，将空调的温度从22-24℃提高到26-28℃，可以降低10%-15%的电力负荷，减少4-6亿度以上的耗电量。人在夏天出些汗是有利于健康的，能增强新陈代谢、调节内分泌功能并促进自身免疫。</P>
                       <h3>2）灯泡换成节能灯</h3>
                       <p>用电能省近八成家中的普通灯泡换为节能灯泡，并且要购买经过“国家节能产品认证”的产品，您可以通过是否印有“节”字标志来判断。在相同光通量条件下，节能灯比白炽灯可节约电能80%，用于购买节能灯的费用，在(8～10)个月的电费节余中就可以收回。</p>
                   </div>
                   <div class="con1-right">
                       <img src="./images/1.jpeg" alt="">
                   </div>
               </div>
           </div>
           <h2 class="h2-list auto">环境现状</h2>
           <div class="con2 auto">
               <div class="con2-left">
                   <img src="./images/2.jpeg" alt="">
               </div>
               <div class="con2-right">
                   <p>大气污染：</p>
                   <p>中国大气环境面临的形势非常严峻，大气污染物排放总量居高不下。2011年中国二氧化硫年排放量高达1857万吨，烟尘1159万吨，工业粉尘1175万吨，大气污染仍然十分严重。</p>
               </div>
           </div>
           <div class="con3 auto">
               <div class="con3-left">
                   <p>水污染：</p>
                   <p>中国是一个干旱缺水严重的国家。淡水资源总量为28000亿立方米，占全球水资源的6%，仅次于巴西、俄罗斯和加拿大，居世界第四位但人均只有2200立方米。</p>
               </div>
               <div class="con3-right">
                   <img src="./images/3.jpeg" alt="">
               </div>
           </div>
           <div class="con4 auto">
               <div class="con4-left">
                   <img src="./images/4.jpeg" alt="">
               </div>
               <div class="con4-right">
                   <p>土地沙化：</p>
                   <p>中国国土上的荒漠化土地已占国土陆地总面积的27.3%，而且，荒漠化面积还以每年2460平方公里的速度增长。中国每年遭受的强沙尘暴天气由50年代的5次增加到了90年代的23次。</p>
               </div>
           </div>
           <div class="floor">
               <hr>
               Copyright © 2025 保护环境爱护地球官方网站
           </div>
       </div>

   </body>
</html>

...

2.CSS

代码如下（节选示例）：

*{
   margin: 0;
   padding: 0;
}
li{
   list-style: none;
}
a{
   text-decoration: none;
}
body{
   background-color: rgb(129,127,254);
}
.auto{
   width: 1000px;
   margin: 0 auto;
}
.all{
   background-color: #eee;
}
.header{
   height: 500px;
   background: url(../images/header.jpeg) no-repeat;
   background-size: 100% 100%;
}
.banner{
   height: 40px;
   background-color: rgb(22,91,132);
   border-top: 3px solid #fff;
}
.banner li{
   width: 250px;
   height: 40px;
   line-height: 40px;
   color: coral;
   cursor: pointer;
   text-align: center;
   float: left;
}
.banner li:hover{
   background-color: rgba(254,254,254,0.349);
}
.con{
   height: 500px;
   background-color: #fff;
}
.con1{
   height: 480px;
   width: 960px;
   margin-left: 20px;
   background-color: skyblue;
}
.con1-left{
   width: 480px;
   height: 480px;
   float: left;
}
.con1-left h2{
   margin: 70px 0 0 0;
}
.con1-right{
   width: 480px;
   height: 480px;
   float: right;
}
.con1-right img{
   width: 420px;
   height: 420px;
   margin: 30px 0 0 30px;
}
.h2-list{
   height: 40px;
   text-align: center;
   color: darkblue;
}
.con2{
   height: 500px;
}
.con2-left{
   width: 380px;
   height: 380px;
   overflow: hidden;
   border-radius: 190px;
   float: left;
   cursor: pointer;
   margin-left: 100px;
}
.con2-left img{
   width: 380px;
   height: 380px;
   transition: all 0.5s ease;
}
.con2-right{
   width: 300px;
   height: 300px;
   float: left;
   margin: 100px 0 0 100px;
   border-bottom: 3px solid deepskyblue;
}