★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置： 深山工作室 > HTML学习 > 正文

一个不错的分页效果

深山行者个人网站　2007/11/25 21:54:33　深山行者　字体：大 中 小　浏览 4159　我要评论
当前标签
分页

 

分页效果

 

分页效果见下面的代码

以下是引用片段：

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

 

前一页：标准版下拉菜单
后一页：网页中自动换行问题
相关阅读
( 2010/3/15 19:25:12 )DIV+CSS分页代码,放大镜分页效果
( 2009/9/4 8:24:11 )超级实用且不花哨的js代码大全( 2 )
( 2009/7/28 21:02:47 )深山行者留言系统V2.2 (简称留言板V2.2)
( 2009/4/16 20:41:54 )利用java客户端静态页面玩分页
( 2009/2/20 21:56:16 )CSS分页符代码01
( 2009/2/20 21:51:30 )放大的分页代码
( 2009/2/20 21:50:01 )仿mop分页代码
( 2009/1/23 9:59:06 )详解VBScript里的对象 正则表达式功能介绍
共有0条关于《一个不错的分页效果》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称：
表 情：
内 容：
评论内容：不能超过 1000 字，需审核，请自觉遵守互联网相关政策法规。
验证码： 验证码 
深山工作室网友评论声明，请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家、社会、集体和公民的合法权益；
二、不得发布国家法律、法规明令禁止的内容；互相尊重，对自己在本站的言论和行为负责；
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
国内网站常用的一些 CDN 静态资源公共库加速服务
ios苹果版手机微信内置浏览器$(document).on(
最新县及县以上1980年以来历史行政区划代码大全截止2018年3月31日
页面里面的js和css的放的位置顺序与加载速度分析
Dreamweaver在onLoad运行_onOpen.htm时,发生了以下javascript错误
Dreamweaver错误：以下翻译器没有被装载，由于错误;xsltransform.htm;有不正确的设置信息
Dreamweaver错误：在onload运行_beforeSave.htm时，发生了一个JavaScript错误
在iframe窗口中打开链接
更多>>最新添加文章
'禁止站外提交页面和数据
asp将中文汉字字符转为unicode编码(\u编码)与把unicode编码转为汉字
asp中qequest读取优先级顺序（通过优化之后提高速度）
asp计算页面执行时间显示到毫秒
国内网站常用的一些 CDN 静态资源公共库加速服务
ios苹果版手机微信内置浏览器$(document).on(
批量删除access字段里面fld.Properties.Delete
ASP操作access或sqlserver数据库的函数库
更多>>随机抽取信息
一行两列的CSS设置代码
绝对让你长见识：200个骗人的创业项目！
CSS选择符详解
ASP留言板IP或IP段限制与限制留言次数
怎样增加网站外链接和注意事项
利用css实现图片选中后显示文字与图片效果
ios苹果版手机微信内置浏览器$(document).on(
CSS设计网页头部的优化写法
更多>>热门标签
aspdivhtmlcssjsResponseXML1代码DIV CSS做的透明菜单兼容IE、FF等javascript2.0position网站Javaweb 2.0uldiv CSSDOCTYPEidRegExpSEO关闭word-break图片fffunctionrndtextouterHTMLbodyeof265网页ie6textareacsabsoluteFireFoxtablebaseinnerTextas复制inputxhtmldlrelativeliiis标签emjavascri代码 cssWordheightborderV3.1visiteddddt
11