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页)网页设计实例 代码质量高_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="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>

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

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