HTML5期末大作业：大学图书馆，XX大学图书馆--可自由更改名称

coding加油站

已于 2023-02-20 19:53:02 修改

阅读量1.1k

点赞数

分类专栏： web前端作业 Html+Css+JavaScript期末大作业文章标签： html5 css html

于 2022-06-22 21:30:35 首次发布

本文链接：https://blog.csdn.net/pandas23/article/details/125416835

版权

web前端作业同时被 2 个专栏收录

58 篇文章 63 订阅

订阅专栏

Html+Css+JavaScript期末大作业

18 篇文章 13 订阅

订阅专栏

如下代码供学习交流，获取完整代码，请关注公众号（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="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="images/qcode.png">
						<br>
						<span>扫描访问PAD版</span>
					</div>
				</a>
				<span>|</span>
				<a href="javascript:void(0)" class="qcode">手机版
					<div class="tips">
						<img src="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="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">资源简介: &laquo;国家哲学社会科学学术期刊数据库&raquo;是由全国哲学社会科学规划领导…<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">&lt;</span>
		<span id="next" class="arrow">&gt;</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加油站）领取。