671.大学生HTML期末大作业 —【大学生HTML5期末大作业(5页)】 Web前端网页制作 html5+css3
目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页简介
本实例应用html5+css3，div+css布局，代码精简；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含5个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>环保世界 </title>
<link href="style/style.css" type="text/css" rel="stylesheet" />
<embed src="images/music.mp3" loop="true" width="0" height="0"></embed>
</head>
<body>
<div class="contain">
<div class="top">
<div class="logo"><img src="images/img020.jpg" /></div>
</div>
<div class="menu">
<ul>
<li><a href="index.html">首页</a></li><span style="float:left; margin-top:30px;">|</span>
<li><a href="about.html">关于环保</a></li><span style="float:left; margin-top:30px;">|</span>
<li><a href="about1.html">环保图片</a></li><span style="float:left; margin-top:30px;">|</span>
<li><a href="about2.html">未来环保</a></li><span style="float:left; margin-top:30px;">|</span>
<li><a href="about4.html">联系我</a></li>
</ul>
</div>
<div class="banner"><img src="images/img0081.png" /></div>
<div class="main">
<div class="left">
<div class="tit"><h3>智能家具介绍</h3><span style="float:right;"><a style="color:#FFF; margin-right:10px;" href="#"></a></span></div>
<div class="about">
<div class="pic"><img src="images/img006.jpg" width="105" height="113" /></div>
<div class="con">
<p></p>
<p>环保，全称环境保护，是指人类为解决现实的或潜在的环境问题，协调人类与环境的关系，保障经济社会的持续发展而采取的各种行动的总称。其方法和手段有工程技术的、行政管理的、创新研发的，也有法律的、经济的、宣传教育的等。</p>
</div>
</div>
<div style=" clear:both; height:10px;"></div>
<div class="tit">
<h3>环保新闻</h3>
</div>
<div class="news">
<ul>
<li><a href="#">别把智能当万能 背后"他们"正在监视你</a><span>[2015-6-21]</span></li>
<li><a href="#">5G来了 智能家居新的想象空间</a><span>[2015-6-21]</span></li>
<li><a href="#">万亿智能家居市场如何撬动:去伪存真</a><span>[2015-6-21]</span></li>
<li><a href="#">重度雾霾加冷空气来袭</a><span>[2015-6-21]</span></li>
<li><a href="#">聚焦渠道经销 全面推动智能家居落地</a><span>[2015-6-21]</span></li>
</ul>
</div>
</div>
<div class="right">
<div class="righttop">
<div class="rightone">
<div class="tit2">
<h3>环保从我做起</h3><span style="float:right;"><a style="color:#FFF; margin-right:10px;" href="#"></a></span></div>
<div class="about">
<div class="pic"><img width="110" height="84" style="border:1px solid #FFF; padding:1px;" src="images/img015.jpg" /></div>
<div class="cone">环境保护（简称环保）由于工业发展导致环境污染问题过于严重，首先引起工业化国家的重视而产生的，利用国家法律法规和舆论宣传而使全社会重视和处理污染问题。</div>
<div style=" height:15px; clear:both;"></div>
<div class="pic"><img width="110" height="84" style="border:1px solid #FFF; padding:1px;" src="images/img007.jpg" /></div>
<div class="cone">1962年美国海洋生物学家蕾切尔·卡逊在《寂静的春天》一书中明确描述了农药杀虫剂DDT对环境的污染和破坏环境作用，由于该书的警示</div>
</div>
</div>
<div class="righttwo">
<div class="tit" style="background:url(images/img019.jpg) no-repeat;"><h3>视频</h3><span style="float:right;"><a style="color:#FFF; margin-right:10px;" href="#"></a></span></div>
<div style="height:20px; clear:both"></div>
<div style="width:250px; height:190px;">
<img src="images/img009.png" />
</div>
</div>
</div>
<div style=" height:20px; clear:both;"></div>
<div class="rightbot"><DIV class="gt">
...
2.CSS
代码如下（节选示例）：
/* CSS Document */
*{ margin:0px; padding:0px; list-style:none;}/* *全局选择 */
body{ font-size:12px; color:#FFF; font-family:"微软雅黑"; background-image:url(../images/bg001.jpg);}
img{ border:none;}
a{ text-decoration:none; color:#000;}/* text-decoration: none下划线取消 */
a:hover{ text-decoration:underline;}
.contain{ width:1002px; margin:0 auto;}
.top{ height:170px;}
.logo{ float:left; width:248px; height:51px; margin-top:28px; margin-left:360px;}
.tell{ float:right; width:264px; height:42px; margin-top:30px;}
.menu{ height:68px; background:url(../images/img002.png) ;}
.menu li { float:left; width:160px; text-align:center; line-height:68px;}
.menu li a{ font-size:14px; font-family:"微软雅黑"; color:#FFF;}
.banner{ width:1002px; height:338px; overflow:hidden}
.main{ width:984px; height:396px; background:#fff; padding:10px 8px 10px 10px;}
.left{ width:342px; height:auto; overflow:hidden; float:left;}
.tit{ background:url(../images/img019.jpg) no-repeat; height:31px; line-height:28px;}
h3{ color:#FFF; line-height:32px; text-indent:30px; float:left;}
.about{ padding:25px 0px 20px 20px;}
.news{ line-height:24px;padding:30px 10px 20px 20px;}
.news ul li{ border-bottom:1px dashed #999; background:url(../images/img003.png) left center no-repeat; padding-left:10px;}
.news ul li span{ float:right;}
.pic{ float:left; margin-right:10px;}
.con{ float:right; width:200px; font-size:12px; color:#000; line-height:22px; font-family:"微软雅黑"; text-indent:24px;}
.right{ width:627px; float:right; height:100px; color:#000;}
.rightone{ width:338px; float:left;}
.cone{ width:182px; float:right;}
.tit2 {background:url(../images/img004.jpg) no-repeat; height:31px; line-height:31px;}
.conter{ width:984px; height:480px; background:#efffec; padding:10px 8px 10px 10px;}
.w_con{ line-height:24px; padding:10px; color:#000; font-family:"宋体";}
.ct{ color:#000; line-height:24px; }
.ot{color:#000; line-height:24px;}
.m_left{ width:242px; float:left;}
.m_right{ float:left; width:730px;}
.cont_w{ height:418px; background:#FFF; width:710px; padding:20px;}
.product{ height:418px; background:#FFF; width:710px; padding:20px;}
.product ul li{ width:153px; height:135px; float:left; margin-right:16px; margin-bottom:20px; text-align:center;}
.product img{ border:3px solid #FC0;}
.product span{ height:30px; line-height:30px;}
.tit4{ width:750px; height:31px; background:url(../images/img005.jpg)}
.tite3{ height:31px; background:url(../images/img016.jpg) no-repeat; line-height:30px; margin-right:20px}
.t_con{ padding:30px ; text-align:center;}
.righttwo{ float:right; width:270px;}
.t_con ul li{ width:157px; height:28px; background:url(../images/img017.jpg) no-repeat; margin-bottom:8px; line-height:28px; text-align:center;}
.t_con ul li a{ color:#FFF;}
.rightbot{ width:620px; height:126px;}
.gt img{ width:115px; height:89px; border:1px solid #FFF; padding:1px;}
.flashbox{
overflow:hidden;
position:relative;
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
22
0- 0
已为社区贡献24条内容
所有评论(0)