订阅本栏目 RSS您所在的位置: 深山工作室 > HTML > 正文

一个不错的分页效果

深山行者个人网站 2007/11/25 21:54:33 深山行者 字体: 浏览 6987

 

分页效果

 

分页效果见下面的代码

以下是引用片段:

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

 

相关阅读
绝对超酷的JS颜色板
JS获取网页中HTML元素的几种方法
过滤输入字符串中的危险符号
绝对可以用的IE6绿色版下载
禁止网站的静态模板被下载
深山旅行社网站管理系统 v1.8
css a标签与如何利用css中text-indent实现文章缩进
常用正则表达式集锦
共有0条关于《一个不错的分页效果》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

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

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>同类信息
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
js指定日期加n天加n月加n年
jquery中动态生成的代码使用on hover事件时不出现效果
更多>>最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>随机抽取信息
windows xp 安装IIS,设置IIS。
利用CSS中的float属性实现文字环绕图片的效果
四川省中国青年旅行社有限公司高新分社
使用uiautomatorviewer连接模拟器页面报错:Error while obtaining UI hierarchy XML file
常见显示器尺寸与分辨率对照
利用DateAdd把时间差转换为正常日期格式