一个不错的分页效果
深山行者个人网站 2007/11/25 21:54:33 深山行者 字体:
大 中 小 浏览 6321
分页效果
分页效果见下面的代码
以下是引用片段:
<!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=utf-8" /> <title>给放大的分页</title> <meta name="KEYWords" content="css" /> <meta name="DEscription" content="分页" /> <meta content="all" name="robots" /> <style type="text/css"> ul#hovershow{ list-style-type: none; margin: 50px; width:200px; float: left; display: inline; clear: both; } ul#hovershow li{ float: left; display: inline; width:20px; height: 20px; margin: 2px; } ul#hovershow li a {
display: block; width:20px; height:20px; border:1px #999 solid; color:#0984FF; background-color:#fff; text-decoration: none; line-height: 20px; font-size: 12px; text-align: center; font-weight: bold; }
ul#hovershow li a:hover{ position: absolute; width:40px; height: 40px; line-height: 40px; font-size: 32px; z-index:100; margin: -10px 0 0 -10px; } ul#hovershow li:hover + li a{ position: absolute; width:30px; height: 30px; line-height: 30px; font-size: 24px; z-index:99; margin: -5px 0 0 -5px; } </style> </head>
<body> <h1>给放大的分页</h1> <ul id="hovershow"> <li><a href="#1" title="#1">1</a></li> <li><a href="#2" title="#2">2</a></li> <li><a href="#3" title="#3">3</a></li> <li><a href="#4" title="#4">4</a></li> <li><a href="#5" title="#5">5</a></li> <li><a href="#6" title="#6">6</a></li> <li><a href="#7" title="#7">7</a></li>
</ul> </body> </html>
|
- 相关阅读
- expression为什么性能差?[转帖]
- 初学ASP动态网页制作常用错误处理
- ASP FSO读取XX文件夹下的所有文件与创建使用时间
- 深山旅行社网站管理系统 v1.5
- 键盘上shift键的奇妙用途
- 能坚持几秒?据说,美国空军的飞行员被强制达到2分钟!
- 深山网吧留言板系统v4.0
- Python pandas删除指定行/列数据的方法实例
- 共有0条关于《一个不错的分页效果》的评论
- 发表评论