CSS翻页效果,鼠标放上时变化,无需JS

2016-02-20 00:23 43 1 收藏

有一种朋友不在生活里，却在生命力；有一种陪伴不在身边，却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗？话不多说下面就和大家分享CSS翻页效果,鼠标放上时变化,无需JS吧。

【 tulaoshi.com - Web开发】

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /titleDIV CSS实例：一款不错的CSS翻页效果（DIGG）/titlestyle type="text/css"BODY {FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;WIDTH: 60%; PADDING-LEFT: 25px;}DIV.digg {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center}DIV.digg A {BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none}DIV.digg A:hover {BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid}DIV.digg A:active {BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid}DIV.digg SPAN.current {BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099}DIV.digg SPAN.disabled {BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid}/stylebodypa href="/" _fcksavedurl="/"Digg Style - websbook.com/adiv class="digg"span class="disabled"  /spanspan class="current"1/spana href="#？page=2" _fcksavedurl="#？page=2"2/aa href="#？page=3" _fcksavedurl="#？page=3"3/aa href="#？page=4" _fcksavedurl="#？page=4"4/aa href="#？page=5" _fcksavedurl="#？page=5"5/aa href="#？page=6" _fcksavedurl="#？page=6"6/aa href="#？page=7" _fcksavedurl="#？page=7"7/a...a href="#？page=199" _fcksavedurl="#？page=199"199/aa href="#？page=200" _fcksavedurl="#？page=200"200/aa href="#？page=2" _fcksavedurl="#？page=2"  /a/div/p/body/html

提示：您可以先修改部分代码再运行

来源:https://www.tulaoshi.com/n/20160220/1631767.html

上一篇：好看的图案QQ分组设计_拒绝我所有的暧昧
下一篇： CSS教程:Mozilla建议的css书写顺序

看过《CSS翻页效果,鼠标放上时变化,无需JS》的人还看了以下文章更多>>

CSS:网页表单实现鼠标悬停交互效果

标签： Web开发

制作表单的时候，实现鼠标悬停交互效果有多种方法: 1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了，但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进行修改也将会很繁琐。这样直接写入xhtml也会让页面代码增加，如果只是一个input输入框或许是无所谓的，如果是几十个几百个，增加的字节数就很宠大了。 ...

完全CSS写的鼠标悬停tip效果

标签： Html CSS布局 Div+CSS XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd" <html xmlns="http://www.w3.org/1999/xhtml" <head <meta http-equiv="Content-Type" content="text/html; charset=GB2312" / <meta name="Author" content="Aultoale" / <style type="text/CSS" body {f...

2345看图王如何使用鼠标滚轮翻页？

2345看图王如何使用鼠标滚轮翻页？什么是鼠标翻页功能? 鼠标翻页功能是指当鼠标移动到图片的左右两端时，界面上会显示出翻页箭头，移动鼠标到箭头上，点击即可完成向上或向下切换图片的操作，操作起来更方便。如何设置鼠标滚轮的翻页功能? 鼠标滚轮在默认情况里是调整大小的，您也可以设定相关参数，让鼠标滚动时可以...

Css改变鼠标形状的15种效果代码

标签： Web开发

一般而言，鼠标以斜向上的箭头显示，移到文本上时变为有头的竖线，移到超级链接上变为手型。但用css可控制鼠标的显示效果，如可使鼠标移到普通文本上也显示成手型。用css控制的语法如下: 文本或其它页面元素把 * 换成如下15个效果的一种： hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-r...

鼠标放上去则向上向下滚动的代码