目录
前言
绿色家园环境保护主题网页设计实例，应用html+css： Div、导航栏等。代码简单，适用于大学生网页课程作业设计，供大家参考。
一、网页概述
网页布局为“同字型”的布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验。
支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含12个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>共创绿色家园</title>
<link href="css/public.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-----头部开始------->
<div class="top">
<a href="index.html"><img style="float:left" src="images/logo.jpg" /></a>
</div>
<!---nav开始---->
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="baohu.html">环境保护</a></li>
<li><a href="ziran.html">自然环境</a></li>
<li><a href="mingyan.html">环保名言</a></li>
<li><a href="cuoshi.html">环保措施</a></li>
<li><a href="jingji.html">环保与经济</a></li>
</ul>
</div>
</div>
<!---nav结束---->
<div class="main">
<div class=" banner"><img src="images/banner.gif" /></div>
<div class="baohu">
<div class="baohu-tit">环境保护含义</div>
<div class="neir">
<p> 环境保护一般是指人类为解决现实或潜在的环境问题，协调人类与环境的关系，保护人类的生存环境、保障经济社会的可持续发展而采取的各种行动的总称。其方法和手段有工程技术的、行政管理的，也有经济的、宣传教育的等。</p>
<br />
<p> 环保即环境保护。环境保护（environmental protection）涉及的范围广、综合性强，它涉及自然科学和社会科学的许多领域等，还有其独特的研究对象。环境保护方式包括：采取行政、法律、经济、科学技术、民间自发环保组织等等，合理利用自然资源，防止环境的污染和破坏，以求自然环境同人文环境、经济环境共同平衡可持续发展，扩大有用资源的再生产，保证社会的发展。</p>
</div>
</div>
<div class="ditu">
<img src="images/zhu01.jpg" />
<div class="jiange"></div>
<img src="images/zhu02.jpg" />
<div class="jiange"></div>
<img src="images/zhu03.jpg" />
<div class="jiange"></div>
<img src="images/zhu04.jpg" />
<div class="jiange"></div>
<img src="images/zhu05.jpg" />
<div class="jiange"></div>
</div>
</div>
<!--底部---->
<div class="footer">环保人人有责 共创绿色家园</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
.main{ width:1366px; min-height:800px; background:#ddfae2; margin:0 auto; padding-bottom:30px;}
.main-tit{ width:100%; height:68px; border-bottom:#365625 1px solid; background:url(../images/biaoti.png) no-repeat 10px 30px;;}
.main-tit h1{ font-size: 24px;color: #121212;line-height: 80px;margin-left: 60px;}
.huaz{ width:1306px; min-height:500px; height:auto; overflow:hidden; margin:30px;}
.huaz .box1{ height:185px; width:1306px; border-bottom:#CCC 1px dashed; margin-top:30px;}
.huaz .box1 .tit{ width: 20px;
height: 118px;
background: #a1a5a1;
float: left;
font-size: 24px;
color: #2f312f;
padding: 20px 10px;}
.huaz .box1 .xq{ width: 1230px; height:110px; float:left; font-size:18px; color:#343534; margin-top:50px; margin-left:30px;}
.ziran{ margin:30px; width:1306px; height:auto; overflow:hidden; font-size:18px; color:#121212}
.ziran img{ float:left; margin-right:20px; }
.mingyan{ margin:30px; width:1306px; height:auto; overflow:hidden; font-size:18px; color:#121212}
.m-left{ width:50%; height:594px; overflow:hidden; float:left}
.m-right{ width:50%; height:594px; overflow:hidden; float:left}
.tup{ height:246px; width:100%;}
.tup img{ float:left}
.tup .jiag{ width:30px; height:246px; float:left;}
.cuoshi{ width:100%; }
.cuoshi ul { margin:20px;}
.cuoshi ul li{ line-height:50px; height:50px; color:#3d2915; border-bottom:#CCC 1px dashed;}
.cuoshi ul li a{ float:left; display:block; font-size:18px;line-height:50px; height:50px; color:#121212; }
.cuoshi ul li a:hover{ color:#000;}
.cuoshi ul li span{ float:right; color:#666; line-height:50px;}
.jingji{ color:#121212;margin:30px; width:1306px; height:auto; overflow:hidden; font-size:14px;}
.jingji .con{ width:100%; text-align:center; height:auto; margin:10px 0px;}
.cs-nr{ color:#131313;margin:30px; width:1306px; height:auto; overflow:hidden; font-size:14px;}
.cs-nr h1{ font-size:20px; text-align:center; margin:20px 0px;}
.cs-nr .cent{ width:100%; text-align:center;}
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
