目录
♬♬♬欢迎光临我的优快云!这里是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;
}
...
五、总结
设计一个样式美观又人性化的网页,除了具备扎实的专业知识,还需具备美学和人机工程学等相关知识,优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,要去掉所有的冗余的东西;
2.使用方便
要满足使用者的要求,网页适合使用,显示出其功能美;
3.整体性好
围绕一个统一的目标设计,强调整体的功能性;
4.形象突出
尽量符合网页美的标准,能够使网站的形象得到最大限度的提升,追求雅俗共赏。页面用色协调,布局符合形式美的要求:布局有条理,充分利用美的形式,使网页富有可欣赏性,提高档次。
5.交互式强
发挥网络的优势,想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】;Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等,有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅: