web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用...

>>>❤戳我❤>>>点击进入300例期末大作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~原始HTML+CSS+J...

@码住夏天-web网页设计

4702人浏览 · 2021-09-28 09:38:52

@码住夏天-web网页设计 · 2021-09-28 09:38:52 发布

>>>❤戳我❤>>>点击进入300例期末大作业作品

临近期末, 你还在为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 校园主题网页设计(南京大学3页)个人毕设专用
[>>>❤戳我❤>>>点击进入300例期末大作业作品]( https://ruanjiafeng2013.gitee.io/html-page )
作品介绍
一、作品演示
1.首页
2.详情
3.列表
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业(成品下载)
[>>>戳我>>>点击进入主页查看更多源码]( javascript:void(0) )

1.首页

web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用_html期末大作业

2.详情

web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用_javascript_02

3.列表

web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用_html期末大作业_03

二、代码目录

web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用_html期末大作业_04

三、代码实现


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXX大学</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="headCenter" id="headCenter">
<div class="headMenu" id="headMenu">
<div class="headMenuTelLogo">
</div>
<div class="headMenuTelCenter">
<div class="headMenu01" id="headMenu01">
                    中心服务热线
</div>
<div class="headMenu02" id="headMenu02">
                    XXX
</div>
</div>
</div>
<div class="index_top_out">
<div class="index_top">
<div class="index_nav">
<ul>
<li class="cur"><a href="#">首页</a> </li>
<li><a href="#">中心概括</a> </li>
<li><a href="#">指挥校园</a> </li>
<li><a href="#">网络管理</a> </li>
<li><a href="#">校园一卡通</a> </li>
<li><a href="#">法规制定</a> </li>
<li><a href="#">等保工作</a> </li>
<li><a href="#">正版软件中心</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="main-center">
<div class="g-login-mid-outer">
<div id="side">
<ul class="m">
<li style="background-image: url(images/banner01.png);"><a href="javascript:void(0)">
</a></li>
<li style="background-image: url(images/banner02.png);"><a href="javascript:void(0)">
</a></li>
<li style="background-image: url(images/banner03.png)"><a href="javascript:void(0)">
</a></li>
<li style="background-image: url(images/banner04.png)"><a href="javascript:void(0)">
</a></li>
</ul>
<ul class="s">
<li class="cur">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
</ul>
</div>
</div>
<div class="middle-menu-cent-midd">
<div class="content-item-index">
<a href="#" class="index01"></a>
</div>
<div class="content-item-index">
<a href="#" class="index02"></a>
</div>
<div class="content-item-index">
<a href="#" class="index03"></a>
</div>
<div class="content-item-index">
<a href="#" class="index04"></a>
</div>
</div>
</div>
<div class="mian_center01">
<div class="middle">
<div class="line">
</div>
<div class="index05">
<div class="index05left">
<h4 class="h4">
                        新闻中心
</h4>
</div>
<div class="index05right">
<a href="#" class="a12">更多> </a>
</div>
</div>
<div class="outer2">
<div id="side2">
<ul class="m2">
<li style="background-image: url(images/ban01.jpg);"><a href="javascript:void(0)"></a>
</li>
<li style="background-image: url(images/ban02.jpg);"><a href="javascript:void(0)"></a>
</li>
<li style="background-image: url(images/ban03.jpg)"><a href="javascript:void(0)"></a>
</li>
<li style="background-image: url(images/ban04.jpg)"><a href="javascript:void(0)"></a>
</li>
<li style="background-image: url(images/ban05.jpg)"><a href="javascript:void(0)"></a>
</li>
<li style="background-image: url(images/ban06.jpg)"><a href="javascript:void(0)"></a>
</li>
</ul>
<ul class="s2">
<li class="cur">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
<li class="">6</li>
</ul>
</div>
</div>
<div class="outer3">
<ul>
<li class="cur li01">
<dl>
<dt class="datedt"><span class="date01">2016-10 </span><span class="date02">19 </span>
</dt>
<dd>
<a href="#" class="title01" title="聊城大学网络信息中心领导来我校"><i></i>聊城大学网络信息中心领导来我校</a> <p
class="title02" >各单位：为做好我校2016年校内财务预算工作，请各位单位根据...</p>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="datedt"><span class="date01">2016-10 </span><span class="date02">19 </span>
</dt>
<dd>
<a href="#" class="title01" title="聊城大学网络信息中心领导来我校"><i></i>聊城大学网络信息中心领导来我校</a> <p
class="title02" >各单位：为做好我校2016年校内财务预算工作，请各位单位根据...</p>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="datedt"><span class="date01">2016-10 </span><span class="date02">19 </span>
</dt>
<dd>
<a href="#" class="title01" title="聊城大学网络信息中心领导来我校"><i></i>聊城大学网络信息中心领导来我校</a> <p
class="title02" >各单位：为做好我校2016年校内财务预算工作，请各位单位根据...</p>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="datedt"><span class="date01">2016-10 </span><span class="date02">19 </span>
</dt>
<dd>
<a href="#" class="title01" title="聊城大学网络信息中心领导来我校"><i></i>聊城大学网络信息中心领导来我校</a> <p
class="title02" >各单位：为做好我校2016年校内财务预算工作，请各位单位根据...</p>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="datedt"><span class="date01">2016-10 </span><span class="date02">19 </span>
</dt>
<dd>
<a href="#" class="title01" title="聊城大学网络信息中心领导来我校"><i></i>聊城大学网络信息中心领导来我校</a> <p
class="title02" >各单位：为做好我校2016年校内财务预算工作，请各位单位根据...</p>
</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
<div class="mianCenter">
<div class="mianCenterMain">
<div class="outer3 outer4 outer4-left pdr20">
<div class="line">
</div>
<div class="index06">
<div class="index06left">
<h4 class="h4">
                            最新资讯
</h4>
</div>
<div class="index06right">
<a href="#" class="a12">更多> </a>
</div>
</div>
<ul>
<li >
<dl>
<dt class="filedt"></dt>
<dd>
<a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="filedt"></dt>
<dd>
<a href="#" class="title03" title="教育部：建设800门优质在线开">教育部：建设800门优质在线开</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="filedt"></dt>
<dd>
<a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="filedt"></dt>
<dd>
<a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="filedt"></dt>
<dd>
<a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="filedt"></dt>
<dd>
<a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="filedt"></dt>
<dd>
<a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="filedt"></dt>
<dd>
<a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="filedt"></dt>
<dd>
<a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
</ul>
</div>
<div class="outer3 outer4">
<div class="line">
</div>
<div class="index06">
<div class="index06left">
<h4 class="h4">
                            通知公告
</h4>
</div>
<div class="index06right">
<a href="#" class="a12">更多> </a>
</div>
</div>
<ul>
<li >
<dl>
<dt class="messdt"></dt>
<dd>
<a href="#" class="title03" title="硕士生、博士生一卡通领取通知">硕士生、博士生一卡通领取通知</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="messdt"></dt>
<dd>
<a href="#" class="title03" title="毕业生一卡通销户退款提醒">毕业生一卡销户通退款提醒</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="messdt"></dt>
<dd>
<a href="#" class="title03" title="校园无线网暂停通知">校园无线网暂停通知</a> <span class="title04">03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="messdt"></dt>
<dd>
<a href="#" class="title03" title="毕业生一卡销户通退款提醒">毕业生一卡销户通退款提醒</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="messdt"></dt>
<dd>
<a href="#" class="title03" title="硕士生、博士生一卡通领取通知">硕士生、博士生一卡通领取通知</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="messdt"></dt>
<dd>
<a href="#" class="title03" title="毕业生一卡通销户退款提醒">毕业生一卡通销户退款提醒</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="messdt"></dt>
<dd>
<a href="#" class="title03" title="毕业生一卡销户通退款提醒">毕业生一卡销户通退款提醒</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="messdt"></dt>
<dd>
<a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="messdt"></dt>
<dd>
<a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
</ul>
</div>
<div class="outer3 outer4 outer4-left pdr20">
<div class="line">
</div>
<div class="index06">
<div class="index06left">
<h4 class="h4">
                            服务流程
</h4>
</div>
<div class="index06right">
<a href="#" class="a12">更多> </a>
</div>
</div>
<ul>
<li >
<dl>
<dt class="perdt"></dt>
<dd>
<a href="#" class="title03" title="端口开放申请">端口开放申请</a> <span class="title04">03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="perdt"></dt>
<dd>
<a href="#" class="title03" title="IP地址变更提醒">IP地址变更提醒</a> <span class="title04">03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="perdt"></dt>
<dd>
<a href="#" class="title03" title="XXX大学主页空间、域名备案">XXX大学主页空间、域名备案</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="perdt"></dt>
<dd>
<a href="#" class="title03" title="电子邮箱申请表">电子邮箱申请表</a> <span class="title04">03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="perdt"></dt>
<dd>
<a href="#" class="title03" title="办公区用户上网申请">办公区用户上网申请</a> <span class="title04">03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="perdt"></dt>
<dd>
<a href="#" class="title03" title="静态IP地址申请">静态IP地址申请</a> <span class="title04">03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="perdt"></dt>
<dd>
<a href="#" class="title03" title="静态IP地址申请">静态IP地址申请</a> <span class="title04">03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="perdt"></dt>
<dd>
<a href="#" class="title03" title="办公区用户上网申请">办公区用户上网申请</a> <span class="title04">03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="perdt"></dt>
<dd>
<a href="#" class="title03" title="办公区用户上网申请">办公区用户上网申请</a> <span class="title04">03-21</span>
</dd>
</dl>
</li>
</ul>
</div>
<div class="outer3 outer4">
<div class="line">
</div>
<div class="index06">
<div class="index06left">
<h4 class="h4">
                            技术指南
</h4>
</div>
<div class="index06right">
<a href="#" class="a12">更多> </a>
</div>
</div>
<ul>
<li >
<dl>
<dt class="setdt"></dt>
<dd>
<a href="#" class="title03" title="校园IPv6使用说明">校园IPv6使用说明</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="setdt"></dt>
<dd>
<a href="#" class="title03" title="DNS无法解析的解决方法">DNS无法解析的解决方法</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="setdt"></dt>
<dd>
<a href="#" class="title03" title="校园IPv6使用说明">校园IPv6使用说明</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="setdt"></dt>
<dd>
<a href="#" class="title03" title="DNS无法解析的解决方法">DNS无法解析的解决方法</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="setdt"></dt>
<dd>
<a href="#" class="title03" title="校园IPv6使用说明">校园IPv6使用说明</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="setdt"></dt>
<dd>
<a href="#" class="title03" title="DNS无法解析的解决方法">DNS无法解析的解决方法</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="setdt"></dt>
<dd>
<a href="#" class="title03" title="校园IPv6使用说明">校园IPv6使用说明</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="setdt"></dt>
<dd>
<a href="#" class="title03" title="DNS无法解析的解决方法">DNS无法解析的解决方法</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="setdt"></dt>
<dd>
<a href="#" class="title03" title="校园IPv6使用说明">校园IPv6使用说明</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
</ul>
</div>
<div class="outer3 outer4 outer5 outer4-left pdr20">
<div class="line">
</div>
<div class="index06">
<div class="index06left">
<h4 class="h4">
                            快速通道
</h4>
</div>
<div class="index06right">
<a href="#" class="a12">更多> </a>
</div>
</div>
<ul>
<li >
<dl>
<dt class="kuaidt"></dt>
<dd>
<a href="#" class="title03" title="网上办公">网上办公</a> <span class="title04"><a href="#"
class="kuaidt">校园邮箱(教育网)</a></span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="kuaidt"></dt>
<dd>
<a href="#" class="title03" title="校园邮箱(教育网)">校园邮箱(教育网)</a> <span class="title04"><a
href="#" class="kuaidt">校园门户</a></span>
</dd>
</dl>
</li>
</ul>
</div>
<div class="outer3 outer4 outer5">
<div class="line">
</div>
<div class="index06">
<div class="index06left">
<h4 class="h4">
                            常见问题
</h4>
</div>
<div class="index06right">
<a href="#" class="a12">更多> </a>
</div>
</div>
<ul>
<li >
<dl>
<dt class="helpdt"></dt>
<dd>
<a href="#" class="title03" title="通过关注学校微信公众号，进行一">通过关注学校微信公众号，进行一</a> <span class="title04">
                                    03-21</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="helpdt"></dt>
<dd>
<a href="#" class="title03" title="一卡通为什么会冻结">一卡通为什么会冻结</a> <span class="title04">03-21</span>
</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
<div class="foot">
<div class="foot_main">
<p>
<a href="#">联系我们</a><span>|</span> <a href="#">法律声明</a><span>|</span> <a href="#">后台管理</a><span>|</span>
<a href="#">旧版网站</a>
</p>
<p>
<label>
                    版权所有：XXX大学信息中心
</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label>
                    联系电话：XXX
</label>
</p>
<p>
<label>
                    地址：XXX
</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label>
                    苏ICP备-XXX
</label>
</p>
</div>
</div>
</body>
</html>