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

本文主要是介绍web前端期末大作业 html+css+javascript 校园主题网页设计(南京大学3页)个人毕设专用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

>>>❤戳我❤>>>点击进入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期末大作业(成品下载)
- [>>>戳我>>>点击进入主页查看更多源码]( https://blog.csdn.net/ruan365392777?spm=1000.2115.3001.5343 )

一、作品演示

1.首页

在这里插入图片描述

2.详情

在这里插入图片描述

3.列表

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现


<!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> <pclass="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> <pclass="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> <pclass="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> <pclass="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> <pclass="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"><ahref="#" 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>

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

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可wx公Z号 ---> web前端小日记 获取更多源码 !

在这里插入图片描述

六、更多HTML期末大作业(成品下载)

>>>戳我>>>点击进入主页查看更多源码

200多例 HTML5期末考核大作业源码 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!