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

原创

html网页设计 2022-04-22 22:34:30 ©著作权

文章标签 css javascript html html期末大作业 php 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者html网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

作品介绍

一、作品演示
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业(成品下载)

一、作品演示

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

三、代码实现

<!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>