基于css和mysql技术的图书馆门户信息解释

基于css和mysql技术的图书馆门户信息解释

1基于jquera和：的数字资源信息展示如今，大学图书馆的开放应用系统已经发展。除了内容设计和开发外，web应用系统的交互性、视觉效果和用户体验也应该考虑在内。随着高校图书馆数字资源越来越多,图书馆门户系统的页面需要在有限的版面和空间内展示更多的数字资源信息,同时信息又不能过于密集和集中从而影响美观和用户体验,用户感觉疲劳,采用基于jQuery和CSS的鼠标移动到链接文字上弹出提示层的技术在图书馆门户系统中展示数字资源信息,能很好地解决高校图书馆门户系统在有限的空间展示更多数字资源的问题,很好地改进了用户体验。2jquera技术jQuery由美国人JohnResig于2006年创建,是继prototype之后又一个优秀的JavaScript框架.秉承“Writeless,Domore”的宗旨,jQuery以其简明通俗的语法风格和兼容CSS3与各种浏览器的优势,如IE6.0,IE7.0,IE8.0,IE9.0,FF1.5,Safari2.0,Opera9.0等主流浏览器,jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供aJAX交互。3标记性接口语言CSS(CascadingStyleSheet)译作层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在CSS中,超级链接有4种不同状态,包括:link未访问的链接)、visited(已访问的链接)、active(激活链接)和hover(鼠标停留在链接上)。主要通过定义鼠标滑过文字链接的hover状态,可以使得鼠标滑过文字链接时,就出现弹出框作为对文字链接的提示,比如介绍数字资源的相关情况。4基于数字资源链接的数字资源界面监控在ASP.NET和SQLServer数据库技术基础上,使用jQuery框架技术和CSS技术,使用CSS进行网页版面的排版,使用jQuery控制动态出现的浮动框,从而实现了当鼠标移动到数字资源链接文字上出现弹出层、把鼠标从链接文字移开以后弹出层消失的效果。显示数字资源是采用列表结构来显示数字资源,每条数据从SQLServer数据库中读取出来,首先来设计页面。4.1页面的公共代码HTML代码部分如下:ASP.NET代码部分如下:4.2absolute、fixed模型网页排版中层级越高,越在上面显示,如果层发生重叠,层级高的会覆盖层级低的,如果非透明或半透明,则会遮挡。网页排版使用CSS代码改变层级,这个属性就是z-index,要让z-index起作用有个前提,就是元素的position属性要是relative,absolute或是fixed,值越大元素就越在上面,从而实现盖住下面元素的目的。大部分的浏览器,如Firefox、Chrome、IE8、IE9等,在大多数的情况下z-index层级越高,内容越应该在上面显示,由于微软早期的IE6、IE7浏览器没有严格遵守CSS标准,所以z-index在IE6下会出现一些特殊情况,即父标签position属性为relative或absolute时,子标签的absolute属性是相对于父标签而言的,在IE6下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index值的大小。4.3通过将浏览器和浏览器中的老鼠移到链接中的层来执行4.3.1图书馆门户系统的数字资源链接解释使用jQuery和CSS技术实现鼠标移动到链接文字上会弹出一个提示框,鼠标移走后提示框自动消失,并把这种提示效果应用到图书馆门户系统的数字资源链接解释方面,用户可以在浏览图书馆数字资源时,当鼠标移动到某种数字资源链接,比如中国知网,此时会自动弹出一个提示框,介绍该资源的相关情况以及如何在校园内如何访问该资源,还可以在该提示框中进行选择、复制文字以及单击某个超级链接跳入新的页面。4.3.2弹出层的父标签z-目标函数弹出层为jbox类,jposition类主要是提供定位属性,其CSS代码如下:鼠标移到链接文字上出现弹出层、鼠标从链接文字上移开后弹出层消失的功能是用jQuery实现,代码如下:这里用到jQuery的多个函数,其中hover()函数是鼠标悬停和离开切换事件,addClass()函数是增加一个类,需要给li标签添加一个jposition类,jposition类是jbox类的父类,jposition类的作用主要是给弹出层jbox提供相对定位属性,removeClass()函数是删除类,当鼠标从链接文字移开以后,需要把这个提供定位属性的jposition类删除掉。由于IE6的bug,所以当使用多个标签重复写弹出层的时候,会遇到后面的层压在了弹出层的上面,这种问题在火狐浏览器下可以用z-index来解决,但是在IE6下面是不起作用的。结合前面介绍的关于positon属性与z-index属性的内容,采用jQuery可以写一个针对IE8以下的IE浏览器函数,给每个li的z-index进行赋值,使弹出层的父标签的z-index属性值递减,这样避免了后面的层遮盖弹出层。代码如下:5图书馆门户应用主要介绍了使用jQuery与CSS实现鼠标移动到文字链接上弹出提示层的效果,jQuery主要实现鼠标滑过的功能效果,CSS主