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

一个不错的分页效果

深山行者个人网站 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条关于《一个不错的分页效果》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

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

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>同类信息
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
js指定日期加n天加n月加n年
jquery中动态生成的代码使用on hover事件时不出现效果
iframe里阻止_blank弹出新窗口的方法
jquery实现下拉加载更多
jquery获得当前所有input表单数据并进行序列化的各种问题与解决方案serialize与serializeArray的区别分析
更多>>最新添加文章
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
aliyun阿里云续费域名优惠口令(注册、续费都可以使用)
windows7环境下安装配置jdk
python对微信操作要用到这两个库wxpy与itchat
ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
解决国内 github.com 打不开的准确方法
更多>>随机抽取信息
JS操作Cookie记录
radio单选按钮组选择详细
取得鼠标所在位置的对象
一个非常不错的程序编辑工具--PSPad editor
ASP取出HTML里面的图片地址的函数
表格增加