web前端期末大作业 html+css+javascript 校园主题(东北大学8页)网页设计实例代码质量高...

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。主要有：登录、注册、主页、列表页、详情页 等总共 5 个页面html下载。

2.网页作品编辑方面：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断(提交时表单不能为空)

文章目录

web前端期末大作业 html+css+javascript (东北大学8页)网页设计实例代码质量高
[进入300例期末大作业作品]( https://ruanjiafeng2013.gitee.io/html-page )
作品介绍
一、作品演示
二、代码实现

二、代码实现

<!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="X-UA-Compatible" content="IE=7" /><title>东华大学</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta name="keywords"  content="" /><meta name="description" content="" /> <link href="css/common.css" rel="stylesheet" type="text/css" /><link href="css/lianghui.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="css/jquery.js"></script><script type="text/javascript" src="css/search_common.js"></script><SCRIPT type=text/javascript>$(document).ready(function(){$("#fancymenu >li").bind('mouseover',function(){var index=$(this).index();if (index!=0 && index!=6)    { 

$(this).find(".erji").show();$(this).siblings().find(".erji").hide();    }    })$("#fancymenu >li").bind('mouseout',function(){$(this).find(".erji").hide();    })  })</SCRIPT></head><body><div style="WIDTH: 100%" id=dBody1>

<div style="MARGIN: auto; WIDTH: 1002px;" class="top center 1002"><div><div style="WIDTH: auto" ><div style="WIDTH:300px; FLOAT: left" ><table border=0 cellSpacing=0 cellPadding=0 width="100%"><tbody><tr><td style="liNE-HEIGHT: 31px; HEIGHT: 31px; COLOR: #fff">欢迎进入东华大学！</td></tr></tbody></table></div>

<div class="topright"><div class="login"><a href="#" target="_blank">登录</a>&nbsp;|&nbsp;<a href="#" target="_blank">注册</a></div><div class=yuyrr><font id=jfimg ><a style="CURSOR: pointer"  target=_self>设为首页</a> |&nbsp;</font> <a href="#" target=_self>加入收藏</a> | <a class=yinc href="#" target=_self>联系我们</a> </div></div><div style="CLEAR: both"></div></div>

<div id=fancymenu class=headerMenulist><li class="index"><a href="index.aspx"><span><img class="indexImg" src="/ifile/109/-1/index.gif" /></span></a></li><li class='checkshouye' ><a  title="东华首页" href="index.html"><span><div>东华首页</div></span></a> </li><li class="menudiv"></li><li class='headerMenuli' ><a  title="东华政策" href="#"><span><div>东华政策</div></span></a> <ul class=erji><li><a href="http://www.xiaocui.org/plus/list.php?tid=2">幸福动态</a> </li><li><a href="http://www.xiaocui.org/plus/list.php?tid=4">行业新闻</a> </li></ul></li><li class="menudiv"></li><li class='headerMenuli' ><a  title="东华资讯" href="#"><span><div>东华资讯</div></span></a><ul class=erji><li><a href="http://www.xiaocui.org/plus/list.php?tid=2">幸福数字</a> </li><li><a href="http://www.xiaocui.org/plus/list.php?tid=2">幸福视频</a> </li></ul></li>  <li class="menudiv"></li><li class='headerMenuli' ><a  title="院校信息" href="#"><span><div>院校信息</div></span></a> <ul class=erji><li><a href="http://www.xiaocui.org/plus/list.php?tid=2">幸福政策</a> </li></ul></li><li class="menudiv"></li><li class='headerMenuli' ><a  title="硕士目录" href="#"><span><div>硕士目录</div></span></a> <ul class=erji><li><a href="http://www.xiaocui.org/plus/list.php?tid=2">幸福专家</a> </li><li><a href="http://www.xiaocui.org/plus/list.php?tid=2">幸福人物</a> </li></ul></li>  <li class="menudiv"></li><li class='headerMenuli' ><a  title="历年分数线" href="#"><span><div>历年分数线</div></span></a></li><li class="menudiv"></li><li class='headerMenuli' ><a  title="历年真题" href="#"><span><div>历年真题</div></span></a></li><li class="menudiv"></li><li class="serch"><div class="iupdiv"><input type="text"  name="sear_key"   id="txtkey_heard"  class="iuputcss" value="全站搜索"  onclick="if (this.value!=''&& this.value!=undefined)this.value='';" /></div><div  name="sear_key" class="inputimg"  onclick="heardJudge();"></div></li></div><div class=clr></div><div class=headerMenuBottom></div>

<div id=_ctl0__ctl3_div_effect></div></div>

</div></div><div style="margin: auto; WIDTH: 1002px;">

<div id=body>

<!--上部分--><div class="w1002 center center_top"><div class="center_top_left"><h2><img src="img/center_top_left.jpg" /></h2><div id="news" style="width:"><ul id="title"><li class="link">东华政策</li><li class="link">最新资讯</li></ul><div style="clear:both"></div><div id="concent"><div id="con"><img src="img/tu1.jpg" /><ul><li><span class="new_title"><a href="#">学校组织党委中心组(扩大)学习辅导报告集体学习党的...</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校学子在上海高校学生创造发明“科创杯”奖评选中获...</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校第64期入党积极分子培训班结业典礼日前举行 429名学...</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校侨联主席朱利民教授当选中国侨联第九届委员会委员并荣获...</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">全国纺织类三大赛事在我校举行，448件学生作品角逐各类奖项..</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校召开民用航空复合材料协同创新中心工作推进会 ...</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校与新南威尔士大学联合主办国际素描研讨会及作品展 ... </a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校与新南威尔士大学联合主办国际素描研讨会及作品展 ... </a></span><span class="new_dates">[2013-12-30]</span></li>     </ul></div><div id="con"><img src="img/tu1.jpg" /><ul><li><span class="new_title"><a href="#">学校组织党委中心组(扩大)学习辅导报告集体学习党的...</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校学子在上海高校学生创造发明“科创杯”奖评选中获...</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校第64期入党积极分子培训班结业典礼日前举行 429名学...</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校侨联主席朱利民教授当选中国侨联第九届委员会委员并荣获...</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">全国纺织类三大赛事在我校举行，448件学生作品角逐各类奖项..</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校召开民用航空复合材料协同创新中心工作推进会 ...</a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校与新南威尔士大学联合主办国际素描研讨会及作品展 ... </a></span><span class="new_dates">[2013-12-30]</span></li><li><span class="new_title"><a href="#">我校与新南威尔士大学联合主办国际素描研讨会及作品展 ... </a></span><span class="new_dates">[2013-12-30]</span></li>     </ul></div></div></div><script language="javascript" type="text/javascript" src="css/news_js.js"></script></div><div class="center_top_right" style="position:relative"><h2><img src="img/center_top_right.jpg" /></h2><div class="center_top_right_con" ><img src="img/center_top_right_img.jpg" /><div class="catct"><h3>联系方式 <font style="color:#989898; font-size:10px; font-family:Arial, Helvetica, sans-serif">contacts</font></h3><p>021-54253789<br /><br />1424195041<br /><br />1424195041@qq.com<br /><br /><br /><font style="font-size:18px; color:#d50e0e; font-weight:bold; margin-left:-13px; font-family:'微软雅黑','黑体';">13541207463</font></p></div></div></div></div><div class="w1002 center center_middle"><div class="center_middle_left"><!--考研入门--><div class="fenlei"><h3><span class="fenlei_names">考研入门  <font style="color:#989898; font-size:10px; font-family:Arial, Helvetica, sans-serif">kaoyan</font></span><span class="fenlei_more"><a href="#" target="_blank">MORE</a></span></h3><ul><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li></ul></div><!--备考信息--><div class="fenlei"><h3><span class="fenlei_names">考研入门  <font style="color:#989898; font-size:10px; font-family:Arial, Helvetica, sans-serif">kaoyan</font></span><span class="fenlei_more"><a href="#" target="_blank">MORE</a></span></h3><ul><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li></ul></div><!--招生信息--><div class="fenlei"><h3><span class="fenlei_names">考研入门  <font style="color:#989898; font-size:10px; font-family:Arial, Helvetica, sans-serif">kaoyan</font></span><span class="fenlei_more"><a href="#" target="_blank">MORE</a></span></h3><ul><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li></ul></div><!--考辅信息--><div class="fenlei"><h3><span class="fenlei_names">考研入门  <font style="color:#989898; font-size:10px; font-family:Arial, Helvetica, sans-serif">kaoyan</font></span><span class="fenlei_more"><a href="#" target="_blank">MORE</a></span></h3><ul><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li><li><span class="fenlei_title"><a href="#" target="_blank">我校荣获上海高校心理健康教育工作先进集体</a></span><span class="fenlei_date">2014-01-05</span></li></ul></div><div class="clear"></div><div class="center_middle_cen"><div class="edu_info"><a href="#" target="_blank"><img src="img/mem.jpg" /></a><a href="#" target="_blank"><img src="img/gct.jpg" /></a><a href="#" target="_blank"><img src="img/mba.jpg" /></a><a href="#" target="_blank"><img src="img/emba.jpg" /></a></div><div class="edu_other"><a href="#" target="_blank"><img src="img/pic1.jpg" /></a><a href="#" target="_blank"><img src="img/pic2.jpg" /></a><a href="#" target="_blank"><img src="img/pic3.jpg" /></a><a href="#" target="_blank"><img src="img/pic4.jpg" /></a><a href="#" target="_blank"><img src="img/pic5.jpg" /></a><a href="#" target="_blank"><img src="img/pic6.jpg" /></a><a href="#" target="_blank"><img src="img/pic7.jpg" /></a></div></div></div><div class="center_middle_right"><div class="news_list" style=" height:280px"><h3>最新新闻 <font style="color:#989898; font-size:10px; font-family:Arial, Helvetica, sans-serif">news</font></h3><ul><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li></ul></div>

<div class="news_list" style=" height:305px"><h3>最新动态 <font style="color:#989898; font-size:10px; font-family:Arial, Helvetica, sans-serif">news</font></h3><ul><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li><li><a href="#" target="_blank">学校召开总支书记工作会议 沟通交流学校近期工作 </a></li></ul></div></div></div><!--幸福活动--><div class="blank10"></div><div class="center_bottom w1002 center">

<DL class=image_list><DT><H4 class=vertical_title><P>东</P><P>华</P><P>风</P><P>采</P></H4></DT><DD><A href="#" target=_blank><IMG src="img/img1.jpg"> <div class=trans-bg></div><P>致青春——纪念援疆五十周年暨‘艺术与我·2013’”主题晚会举行</P></A></DD><DD><A href="#" target=_blank><IMG src="img/img2.jpg"> <div class=trans-bg></div><P>致青春——纪念援疆五十周年暨‘艺术与我·2013’”主题晚会举行</P></A></DD><DD><A href="#" target=_blank><IMG src="img/img3.jpg"> <div class=trans-bg></div><P>致青春——纪念援疆五十周年暨‘艺术与我·2013’”主题晚会举行</P></A></DD><DD><A href="#" target=_blank><IMG src="img/img4.jpg"> <div class=trans-bg></div><P>致青春——纪念援疆五十周年暨‘艺术与我·2013’”主题晚会举行</P></A></DD><DD><A href="#" target=_blank><IMG src="img/img5.jpg"> <div class=trans-bg></div><P>致青春——纪念援疆五十周年暨‘艺术与我·2013’”主题晚会举行</P></A></DD></DL><DL style="MARGIN-TOP: 20px" class=image_list><DT><H4 class=vertical_title><P>东</P><P>华</P><P>风</P><P>采</P></H4></DT><DD><A href="#" target=_blank><IMG src="img/img6.jpg"> <div class=trans-bg></div><P>致青春——纪念援疆五十周年暨‘艺术与我·2013’”主题晚会举行</P></A></DD><DD><A  href="#" target=_blank><IMG src="img/img7.jpg"> <div class=trans-bg></div><P>致青春——纪念援疆五十周年暨‘艺术与我·2013’”主题晚会举行</P></A></DD><DD><A href="#" target=_blank><IMG src="img/img8.jpg"> <div class=trans-bg></div><P>致青春——纪念援疆五十周年暨‘艺术与我·2013’”主题晚会举行</P></A></DD><DD><A href="#" target=_blank><IMG src="img/img9.jpg"> <div class=trans-bg></div><P>致青春——纪念援疆五十周年暨‘艺术与我·2013’”主题晚会举行</P></A></DD><DD><A href="#" target=_blank><IMG src="img/img10.jpg"> <div class=trans-bg></div><P>致青春——纪念援疆五十周年暨‘艺术与我·2013’”主题晚会举行</P></A></DD></DL></div></div></div>

<div style="WIDTH: 100%" id=dBody2><div id=_ctl10__ctl0_box class="footer" style=" height:110px"><p>Copyright?2005 沪ICP备05003365  沪举报中心  <br />松江校区：上海市松江区人民北路2999号 201620，延安路校区：上海市延安西路1882号 200051</p></div></div></body></html>