-
【期末大作业】基于HTML+CSS+JavaScript南京大学网页校园教育网站html模板(3页)
一、👨🎓网站题目
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。
二、✍️网站描述
🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有5-10个页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 要有JS特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
- 页面清爽、美观、大方，不雷同。 。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、🌐网站演示
五、⚙️ 网站代码
🧱HTML结构代码
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">1li> <li class="">2li> <li class="">3li> <li class="">4li> 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">1li> <li class="">2li> <li class="">3li> <li class="">4li> <li class="">5li> <li class="">6li> 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-21span> dd> dl> li> <li> <dl> <dt class="filedt">dt> <dd> <a href="#" class="title03" title="教育部：建设800门优质在线开">教育部：建设800门优质在线开a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="filedt">dt> <dd> <a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="filedt">dt> <dd> <a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="filedt">dt> <dd> <a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="filedt">dt> <dd> <a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="filedt">dt> <dd> <a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="filedt">dt> <dd> <a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="filedt">dt> <dd> <a href="#" class="title03" title="华中师范大学校长杨宗凯：信息化">华中师范大学校长杨宗凯：信息化a> <span class="title04"> 03-21span> 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-21span> dd> dl> li> <li> <dl> <dt class="messdt">dt> <dd> <a href="#" class="title03" title="毕业生一卡通销户退款提醒">毕业生一卡销户通退款提醒a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="messdt">dt> <dd> <a href="#" class="title03" title="校园无线网暂停通知">校园无线网暂停通知a> <span class="title04">03-21span> dd> dl> li> <li> <dl> <dt class="messdt">dt> <dd> <a href="#" class="title03" title="毕业生一卡销户通退款提醒">毕业生一卡销户通退款提醒a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="messdt">dt> <dd> <a href="#" class="title03" title="硕士生、博士生一卡通领取通知">硕士生、博士生一卡通领取通知a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="messdt">dt> <dd> <a href="#" class="title03" title="毕业生一卡通销户退款提醒">毕业生一卡通销户退款提醒a> <span class="title04"> 03-21span> dd> dl> li> <li> <dl> <dt class="messdt">dt> <dd> <a href="#" class="title03" title="毕业生一卡销户通退款提醒">毕业生一卡销户通退款提醒a> <span class="title04"> 03-21span> dd> dl>