一个不错的分页效果
深山行者个人网站 2007/11/25 21:54:33 深山行者 字体:
大 中 小 浏览 6276
分页效果
分页效果见下面的代码
以下是引用片段:
<!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>
|
- 相关阅读
- 点击复选框自动写入textarea,去掉自动删掉,适合做(网站来源,网站作者)
- 两个ASP中防止SQL注入式攻击
- 连云港红发廊
- facebook广告推广设定像素标准事件的值和币种等说明
- 旅行社管理系统 V1.9
- 连云港智慧树旅游
- 旅行社手机网站模板1
- 初期入门地接旅行社建站解决方案
- 共有0条关于《一个不错的分页效果》的评论
- 发表评论