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

2016-02-20 00:23 45 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

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

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

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

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

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

标签： Web开发

xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx 脚本之家站长修改

CSS+JS实现的选项卡效果

标签： Html CSS布局 Div+CSS XHTML

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" <html lang="us-en" <head <title<a href="http://www.knowsky.com/article.asp?typeid=38"CSS</a选项卡(html组件)</title <link ...

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...

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

标签： Web开发

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

查看更多精彩>>