483.大学生HTML期末大作业 —【安徽开放大学教育主题网页(16页)】 Web前端网页制作 html+css+js-优快云博客

本文链接：https://blog.youkuaiyun.com/VX_L_5201314168/article/details/146217407

欢迎来到我的优快云主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-优快云博客

5000+网页案例完整代码，主题涵盖30+种类型:

一、网页简介

本实例应用html+css+js：导航菜单、图片滚动、三级页面、实时时间日期、留言表单等。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含16个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

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 rel="stylesheet" type="text/css" href="css/index.css">
</head>

<div class="zuo">
<img src="images/zuo1.jpg" />
<div class="fangshi">
<h1>教学机构</h1>
<p>文法学院<br />
经济与管理学院<br />
教育科学学院</p>
<p>公共基础部<br />
信息工程学院</p>
<p>农业医疗卫生学院<br />
</p>
</div>

<div class="fangshi">
<h1>友情链接</h1>
<p><a href="http://www.moe.gov.cn/" target="_blank">中华人民共和国教育部</a></p>
<p><a href="http://www.ah.gov.cn/" target="_blank">安徽省政府网</a>  </p>
<p><a href="http://www.ahedu.gov.cn/" target="_blank">安徽教育网</a>  </p>
<p><a href="http://www.crtvu.edu.cn/" target="_blank">中央广播电视大学</a>  </p>
<p><a href="http://www.openedu.com.cn/" target="_blank">中央电大在线</a>  </p>
<p><a href="http://www.ouchn.edu.cn/News/Default.aspx" target="_blank">中央电大时讯</a>  </p>
<p><a href="http://ouchn.edu.cn/" target="_blank">国家开放大学</a>  <br />
</p>
<div id="timetable" style="display:block;"> </div>
</div>

</div>

<div class="you">
<div class="jieshao">
<div class="jieshao_l">
<h1>学校新闻</h1>
<p> <a href="xinwen1.html">河北电大赵建华副校长一行来校考察访问</a> <br />
<a href="xinwen2.html">安徽电大第三届青年教师教学基本功比赛圆满落幕</a> <br />
<a href="xinwen3.html">省教育厅副厅长李和平来校调研指导工作</a><br />
<a href="xinwen4.html">我校举行领导班子专题民主生活会通报会</a><br />
<a href="xinwen1.html">我校承办2013年全国“数据挖掘和智能计算”高研班</a><br />
<a href="xinwen2.html">全省电大教务管理人员业务大赛决赛在省校举办</a><br />
<a href="xinwen3.html">省发改委来校调研安徽远程教育大厦建设项目</a><br />
<a href="xinwen4.html">浙江电大方志刚校长一行来我校考察访问</a><br />
</p>
</div>
<div class="jieshao_r">
<h1>学校动态</h1>
<p><a href="zhaosheng1.html">2013年秋季安徽广播电视大学各分校及教学点联系方式</a><br />
<a href="zhaosheng2.html">2013年秋季招生简章</a><br />
<a href="zhaosheng3.html">2013年春季教学点设置及招生专业（行业）</a><br />
<a href="zhaosheng4.html">2013年春季教学点设置及招生专业</a><br />
<a href="zhaosheng1.html">安徽电大2013年成人高等教育招生专业及学制</a><br />
<a href="zhaosheng2.html">安徽广播电视大学2013年成人高等教育招生章程</a><br />
<a href="zhaosheng3.html">安徽电大2012年成人高等教育招生分校、招生专业及</a><br />
<a href="zhaosheng4.html">安徽广播电视大学2012年成人高等教育招生章程</a>
</p></div>

</div>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
*{margin:0;padding:0;border:0;}
body { font-family: "宋体";font-size: 12px;color:#000000;line-height: 20px;text-align:left}
td,th {font-family: "宋体";font-size: 12px;color: #000000;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
A:hover {TEXT-DECORATION: underline;}
ul,li{list-style-type:none;}

.clearit{clear:both;}
.page{width:1003px; margin:0 auto;}

.daohang{width:1003px; height:42px; margin:0 auto; overflow:hidden; background:url(../images/daohang.jpg) repeat-x;}
.daohang p{width:140px; line-height:42px; display:block; float:left; text-align:center; font-size:14px; font-weight:bold; }
.daohang p a{color:#345479;}

.content{width:1003px; margin:0 auto; background:#c2cdda; padding:20px 0 0;}

.zuo{width:220px; float:left; margin-left:10px; display:inline; }
.fangshi{width:220px; border:1px solid #ffffff; margin-top:10px;background:#345479; }
.fangshi h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:26px; line-height:26px; border-bottom:1px solid #ffffff; color:#ffffff;}
.fangshi p{text-align:left; padding:0 10px; line-height:24px;color:#ffffff;}
.fangshi p a{color:#ffffff;}

.you{width:750px; float:left; margin-left:10px; display:inline;}
.jieshao{width:748px; margin-bottom:10px; }
.jieshao h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:28px; line-height:28px; background:#345479;border-bottom:1px solid #ffffff; color:#ffffff;}
.jieshao p{text-align:left; padding:10px; line-height:24px;color:#ffffff;}
.jieshao a{color:#FFFFFF;}
.jieshao_l{width:370px; float:left;border:1px solid #ffffff; background:#345479;}
.jieshao_r{width:370px; float:right;border:1px solid #ffffff; background:#345479;}

.jieshaoB{width:748px;border:1px solid #ffffff; background:#345479; margin-bottom:10px; }
.jieshaoB h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:28px; line-height:28px; background:#345479;border-bottom:1px solid #ffffff; color:#ffffff;}
.jieshaoB p{padding:10px 0;}
.jieshaoB img{width:200px; margin-right:10px; padding:1px; border:1px solid #FFFF00; background:#FFFFFF;}
.jieshaoB table{margin:0 auto;}
.jieshaoB table tr td{ background:#839ebe; height:26px; line-height:26px;}
.foot{width:1003px; margin:0 auto; padding-top:50px; background:url(../images/foot.jpg) repeat-x top; padding-bottom:50px;}
.foot p{text-align:center; line-height:30px; color:#345479;}

.you h2{font-size:14px; font-weight:bold; text-align:center; line-height:30px; border-bottom:1px solid #FFFF00; color:#000000;}
.neirong{padding:20px; line-height:24px; color:#000000;}

.zhanshi{padding-bottom:20px; overflow:hidden;}
.zhanshi img{width:160px; display:block; float:left; margin-left:10px; display:inline;}

.messageB{width:600px; padding:10px 0; overflow:hidden; text-align:left; line-height:24px;}
.messageB ul li{line-height:24px; margin-top:16px; list-style:none; padding:0;border:0;}
.messageB ul li span{vertical-align:middle; padding-right:12px;}
.messageB ul li .message_in{width:300px; height:22px; border:1px solid #999999;vertical-align:middle;line-height:22px; padding:0;}
.messageB ul li .message_te{width:500px; height:90px; border:1px solid #999999;vertical-align:middle;line-height:18px; padding:0;}
.messageB ul li .message_btn{width:64px; height:20px; padding:0; line-height:20px; background:url(../images/btn.gif) no-repeat; color:#FFFFFF; font-weight:bold; cursor:hand;}

...

3.JS

代码如下（节选示例）：

function get_time()
{
var date=new Date();
var year="",month="",day="",week="",hour="",minute="",second="";
year=date.getYear();
month=add_zero(date.getMonth()+1);
day=add_zero(date.getDate());
week=date.getDay();
switch (date.getDay()) {
case 0:val="星期天";break
case 1:val="星期一";break
case 2:val="星期二";break
case 3:val="星期三";break
case 4:val="星期四";break
case 5:val="星期五";break
case 6:val="星期六";break
}
hour=add_zero(date.getHours());
minute=add_zero(date.getMinutes());
second=add_zero(date.getSeconds());
timetable.innerText=" "+year+"."+month+"."+day+" "+hour+":"+minute+":"+second+val;
}