滚蛋根据地

首页 > 产品研发 > 偷来分页导航一则-略有修改

偷来分页导航一则-略有修改

2009年7月6日蛋王发表评论阅读评论

pageNav

Hiro’s Blog 那偷来的分页导航代码，纯CSS，简单实用。

不过我不喜欢导航条整体还会移动的，所以小修改了一下，保持整条不动。
另外，我觉得在这里hover后的页码起的应该是放大效果，所以把字也搞大一点。

其他没啥说的，上代码，看效果。
代码：

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>pageNavi偷来修改版</title> <style type="text/css"> * { margin:0; padding:0;} body { font:11px Verdana, Geneva, sans-serif; color:#000; padding:10px;} ul { list-style:none;} a { text-decoration:none;} #pageNav li { float:left;} #pageNav li a { display:block; float:left;border:1px solid #666; margin-left:-1px; color:#fff; background:url(http://www.ihiro.org/cases/pageNav/pageNav-bg.gif) repeat-x; width:20px; padding:2px 5px; text-align:center; } #pageNav li a.currPage{ background-position:left bottom; color:#000;} #pageNav li a:hover { background-position:left bottom; position:relative; margin:-2px -6px -2px -5px; opacity:.9; filter:Alpha(opacity=90); width:30px; padding:3px 5px; font-size:13px;} #pageNav li a.arrow:hover {margin:0 0 0 -1px; width:20px; padding:0 5px 1px 5px;} </style> </head> <body> <ul id="pageNav"> <li><a href="#" class="arrow"><<</a></li> <li><a href="#" class="currPage">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li><a href="#">11</a></li> <li><a href="#">12</a></li> <li><a href="#">13</a></li> <li><a href="#">14</a></li> <li><a href="#">15</a></li> <li><a href="#" class="arrow">>></a></li></ul> </body> </html>

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

ps:
点击此处查看 Hiro 的原文，喜欢那种效果的去他那儿搬

分类: 产品研发标签: CSS, pageNavi, 分页导航, 源码

评论 (7) Trackbacks (0) 发表评论 Trackback

仁心博客

2009年7月6日16:46 | #1

回复 | 引用

多谢分享啊
小明猪

2009年7月6日20:56 | #2

回复 | 引用

效果的确不错，支持一下～
蛋王

2009年7月6日23:53 | #3

回复 | 引用

@小明猪

@仁心博客

呵呵，主要还是得支持Hiro老兄，我就是在他完成的99.9%基础上加了那么点东西，连背景图片都懒得传，直接用了他的。。
huaimao

2009年7月7日00:49 | #4

回复 | 引用

偶用的是插件！呵呵，顶一个！
蛋王

2009年7月7日09:09 | #5

回复 | 引用

@huaimao
呵呵，这个pageNavi要用到wordpress可还得动一动。
不过我不会，不会php。。
乒乓器材

2009年7月8日12:58 | #6

回复 | 引用

看来偶也得试试了！
蛋王

2009年7月9日09:06 | #7

回复 | 引用

@乒乓器材
试用期到了，请问要购买不？