HTML5期末大作业：大学图书馆，XX大学图书馆--可自由更改名称
2024-04-30 09:04:20
如下代码供学习交流，获取完整代码，请关注公众号（coding加油站）获取。
1.网页作品简介 ：
HTML期末大学生网页设计作业，大学图书馆，可以作为选题：图书馆首页的设计，大学图书馆，更换里面的内容为自己的图书馆则可以取名为XX大学图书馆的实现
2.知识应用：
常用的html，css，布局，hover等都会被使用到
3. 内容介绍：
《大学图书馆》共有2个页面，分别为
index.html【首页】
该界面实现的主要功能如下：
（1）将body绝对定位，宽高100%，超出部分隐藏，分页相对定位，宽高100%。利用CSS3的transform:translateY以及transition过渡，通过监听鼠标滚轮滚动事件和键盘上下键按键事件实现了插件fullPage的整屏滚动。并通过设置同步标志，防止滚动时一下滚动多页。
（2）右侧导航栏固定定位，超过第一屏时显示，滚动到对应分页，对应导航栏高亮。使用了CSS sprite技术。
（3） 首页下侧向下按钮是一个无限运动的CSS动画。单击移动到下一屏。右上角PAD版手机版滑过出现二维码。
（4） 最后一页调用百度地图，显示学校地理位置。
效果图：
主要代码如下：
<div class="page" id="page-main"><!-- 网页头部 --><div class="header"><!-- 左上角logo --><a href="javascript:void(0)" class="logo"><img src="data:images/logo.png" alt="logo"></a><!-- 右上角菜单 --><div class="menu"><a href="javascript:void(0)">馆藏书目检索</a><span>|</span><a href="javascript:void(0)">学校主页</a><span>|</span><a href="javascript:void(0)" class="qcode">PAD版<div class="tips"><img src="data:images/qcode.png"><br><span>扫描访问PAD版</span></div></a><span>|</span><a href="javascript:void(0)" class="qcode">手机版<div class="tips"><img src="data:images/qcode.png"><br><span>扫描访问手机版</span></div></a><span>|</span><a href="javascript:void(0)">我的图书馆</a></div></div><!-- 搜索框 --><div class="search"><div class="wrapper-span"><span>站内搜索</span><span class="triangle"></span></div><div class="wrapper-input"><input type="text" id="keyword" placeholder="请输入搜索关键字"><input type="button" value="" id="btn-search"><ul id="search-tips"></ul><div id="clear-history"><span id="clear-history-btn">清空历史记录</span></div></div> </div><!-- 日历框 --><div class="calendar"><a href="javascript:void(0)" class="calendar-icon"><!-- 日历活动 --></a><img src="data:images/calendarpic.jpg" class="calendar-pic"><ul class="calendar-week"><li>星期日<span>SUN</span></li><li>星期一<span>MON</span></li><li>星期二<span>TUE</span></li><li>星期三<span>WEN</span></li><li>星期四<span>THU</span></li><li>星期五<span>FRI</span></li><li>星期六<span>SAT</span></li></ul><ul class="calendar-date" id="calendar-date"><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><!-- 弹出遮罩层 --><div class="layer" id="layer"><div class="news-wrapper"><div class="close-wrapper"><span id="close">x</span></div><ul class="item-box" id="newslist"><div class="connect">建立连接</div></ul></div></div><!-- 向下箭头 --><div class="arrow" id="arrow"></div></div><!-- 主页面结束 --><!-- 资源页开始 --><div class="page" id="page-resource"><!-- 页面标题 --><div class="title-wrapper"><h1 class="title"><a href="javascript:void(0)">资源</a></h1></div><!-- 数据库列表 --><ul class="item" id="tab-database"><li class="on-blue"><a href="javascript:void(0)">中文数据库</a></li><li><a href="javascript:void(0)">外文数据库</a></li><li><a href="javascript:void(0)">免费数据库</a></li><li><a href="javascript:void(0)">试用数据库</a></li></ul><!-- 内容列表容器 --><div class="content-list-blue"><!-- 中文数据库条目 --><ul class="item-box listitem"><li><!-- 日期 --><div class="item-date"><span class="day">17</span><span class="yearmonth">2021-10</span></div><!-- 内容 --><div class="item-content"><a href="javascript:void(0)" title="" class="item-title">中国学术文献网络出版总库(CNKI)</a><p class="item-brief">资源名称：中国学术文献网络出版总库 概要介绍：包括学术期刊、博士学位论文、优秀硕士学…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">17</span><span class="yearmonth">2021-10</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">读秀学术搜索数据库</a><p class="item-brief">资源名称： 读秀学术搜索数据库 概要介绍： 本库为读者提…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">17</span><span class="yearmonth">2021-10</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">超星电子图书</a><p class="item-brief">资源名称：超星电子图书 概要介绍：超星电子图书2万余种，包括科技，军事，经济，政治，医…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">17</span><span class="yearmonth">2021-10</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">万方数据知识服务平台</a><p class="item-brief">资源简介 由万方数据股份公司开发，内容涵盖学术论文、期刊…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li></ul><!-- 外文数据库条目 --><ul class="item-box listitem" style="display: none;"><li><div class="item-date"><span class="day">09</span><span class="yearmonth">2021-06</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">Westlaw</a><p class="item-brief">资源简介 Westlaw 是由汤森路透法律信息集团旗下美国West出版公司于1975年开发的综…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">24</span><span class="yearmonth">2021-12</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">CINAHL Plus with Full Text护…</a><p class="item-brief">资源简介 CINAHL Plus with Full Text 提供了世界上最完整有关于护理学及…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">07</span><span class="yearmonth">2021-01</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">CiNii日本论文数据库</a><p class="item-brief">资源简介 CiNii是由日本国立情报学研究所（National Institute of Informat…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">07</span><span class="yearmonth">2021-01</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">美国计算机学会（ACM）期刊数…</a><p class="item-brief">资源简介 ACM（Association for Computing Machinery，美国计算机学会）…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li></ul> <!-- 免费书库库 --><ul class="item-box listitem" style="display: none;"><li><div class="item-date"><span class="day">21</span><span class="yearmonth">2021-12</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">OAC— Online Archive of Cali…</a><p class="item-brief">概要介绍： The OAC is a website that provides free public access…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">21</span><span class="yearmonth">2021-12</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">DLA: Digital Library and Arc…</a><p class="item-brief">概要介绍： 弗吉尼亚理工大学（Virginia tech…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">21</span><span class="yearmonth">2021-12</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">E-Collection</a><p class="item-brief">概要介绍： 瑞士苏黎世联邦理工学院(ETH Zu…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">07</span><span class="yearmonth">2014-01</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">Leiden Repository</a><p class="item-brief">概要介绍： 荷兰莱顿 大学知识库。 …<a href="javascript:void(0)" class="details">[详细]</a></p></div></li></ul> <!-- 试用数据库 --><ul class="item-box listitem" style="display: none;"><li><div class="item-date"><span class="day">25</span><span class="yearmonth">2021-10</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">国家哲学社会科学学术期刊数据…</a><p class="item-brief">资源简介: «国家哲学社会科学学术期刊数据库»是由全国哲学社会科学规划领导…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">19</span><span class="yearmonth">20121-10</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">NextLib网络文献全文数据库</a><p class="item-brief">资源简介 NextLib网络图书馆是依靠先进的互联网技术研发的新一代基于内容、面向用户的的图…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">29</span><span class="yearmonth">2019-10</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">《大成故纸堆》</a><p class="item-brief">资源简介 《大成故纸堆》是专门辑录古旧文献的资料库，内容包含晚清和民国期刊七千多种，古籍…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li><li><div class="item-date"><span class="day">24</span><span class="yearmonth">2021-10</span></div><div class="item-content"><a href="javascript:void(0)" class="item-title">中国法学多用途教学案例库</a><p class="item-brief">《中国法学多用途教学案例库》——国内唯一法学案例教学数据库软件。是专为高校法学院系及其他院…<a href="javascript:void(0)" class="details">[详细]</a></p></div></li></ul></div><!-- 底部导航链接 --><ul class="list-link"><li><a href="#">免费数据库导航系统</a></li><li><a href="#">连大知识库</a></li><li><a href="#">随书光盘</a></li></ul></div>charm.html【魅力图书馆】
该页面的功能如下：
1. 实现功能：banner轮播图:div设置背景图片，最外层父容器宽度100%，div图片容器500%，div图片20%；在4张图片之前添加最后一张图片。图片自动轮播，鼠标移上停止轮播，离开继续轮播，点击左右箭头和下面小圆点都可以切换图片。
2. 全选/取消全选，动态监听全选。
3. 选项卡自动切换，鼠标移上停止切换。离开继续切换，点击选项卡切换。
4. 图片设置透明遮罩层，鼠标移上遮罩层高度减小。
效果图：
主要代码：
<div class="banner"><!-- 图片列表 --><div id="imglist"><div class="img img4"></div><div class="img img1"></div><div class="img img2"></div><div class="img img3"></div><div class="img img4"></div></div><!-- 按钮列表 --><div id="btnlist"><span data-index="1" class="on"></span><span data-index="2"></span><span data-index="3"></span><span data-index="4"></span></div><!-- 左右箭头 --><span id="prev" class="arrow"><</span><span id="next" class="arrow">></span></div><!-- banner end --><!-- searchdoc start --><div class="searchdoc"><div class="checkbox-wrapper"><label><input type="checkbox" id="all"><span>全选</span></label><label><input type="checkbox" id="doc" name="filetype">doc</label><label><input type="checkbox" id="xls" name="filetype">xls</label><label><input type="checkbox" id="ppt" name="filetype">ppt</label><label><input type="checkbox" id="txt" name="filetype">txt</label><label><input type="checkbox" id="pdf" name="filetype">pdf</label></div><div class="input-wrapper"><input type="text" placeholder="请输入文档名称"><input type="button" value="搜索文档"></div></div>适合一些简单的浮动布局作业，获取代码关注公众号（coding加油站）领取。
HTML5期末大作业：大学图书馆，XX大学图书馆--可自由更改名称相关推荐
- HTML5期末大作业：学校网站设计——安徽开放大学(16页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web前端期末大作业
HTML5期末大作业:学校网站设计--安徽开放大学(16页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题 ...
- HTML5期末大作业：动漫网站设计——火影忍者动漫(7页) 动漫HTML代码 学生漫画设计与制作期末作业下载 大学生动漫设计与制作成品下载 漫画作业代码下载
HTML5期末大作业:动漫网站设计--火影忍者动漫(7页) 动漫HTML代码 学生漫画设计与制作期末作业下载 大学生动漫设计与制作成品下载 漫画作业代码下载 常见网页设计作业题材有 个人. 美食. 公 ...
- HTML5期末大作业：动漫在线网站设计——动漫海贼王(5页) 大学生动漫网页设计作业模板下载 南动漫网页设计作业成品 动漫网页制作下载_网页设计代码
HTML5期末大作业:动漫在线网站设计--动漫海贼王(5页) 大学生动漫网页设计作业模板下载 南动漫网页设计作业成品 动漫网页制作下载_网页设计代码 常见网页设计作业题材有 个人. 美食. 公司. 学 ...
- HTML5期末大作业：网站——美丽家乡(含HTML+CSS+JS源码及课程设计文档)
HTML5期末大作业:网站--美丽家乡(含源码及课程设计文档) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等 ...
- HTML5期末大作业：个人空间相册网页设计 (6页) HTML+CSS+JavaScript
HTML5期末大作业:个人空间相册网页设计 (6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 临近期末, 你还在为HTM ...
- HTML5期末大作业：动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成
HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成 临近期末, 你还在为 ...
- HTML5期末大作业：网站——仿游戏官网(龙之谷)HTML+CSS+JavaScript
HTML5期末大作业:网站--仿游戏官网(龙之谷)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网 ...
- HTML5期末大作业：网站——响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页
HTML5期末大作业:网站--响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页 ...
- HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计
HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...
- HTML5期末大作业：运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成
HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末 ...
最新文章
- 如何使用gensim来加载和使用词向量模型word2vec
- ompl_interface/OMPLPlanner
- C#编程总结（七）数据加密——附源码
- 图：图的邻接表创建、深度优先遍历和广度优先遍历代码实现
- 进程线程协程对比（通俗）
- C# 使用NPlot绘图
- Specified key was too long; max key length is 767 bytes
- 目前网络时间服务有哪几种协议？
- 解决HttpServletRequest InputStream只能读取一次问题
- C#AJAX 文件上传
- Spring中@Component，@Service等注解如何被解析？
- [清橙A1364]社交网络结构洞【暴力】
- mysql 获取两个月前的日期
- spring框架 -- IOC
- APS高级排程在钣金冲压行业的应用
- Android使用Service播放音乐
- linux ls搜索 开头,linux中怎么用ls查找以la开头的文件
- 线性表篇 什么是线性表
- CentOS7 本地搭建remix-ide
- eNSP构建企业私有网络