css分页样式代码-侯体宗的博客

css分页样式代码
前端 / 管理员发布于 8年前 298

第一个是从360而来的效果如图所示:普通的a标记的分页，兼容性好。绿色样式

演示代码:

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
第二种：深蓝色效果，当然颜色大家可以自行修改。
效果如图:

演示代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css 分页样式2</title><style type="text/css">* { margin:0; padding:0;}body { font-size:12px; font-family:Verdana;}a { color:#333; text-decoration:none;}ul { list-style:none;}#pagelist {width:600px; margin:30px auto; padding:6px 0px; height:20px;}#pagelist ul li { float:left; border:1px solid #5d9cdf; height:20px; line-height:20px; margin:0px 2px;}#pagelist ul li a, .pageinfo { display:block; padding:0px 6px; background:#e6f2fe;}.pageinfo  { color:#555;}.current { background:#a9d2ff; display:block; padding:0px 6px; font-weight:bold;}</style></head><body><div id="pagelist">  <ul>    <li>首页</li>    <li>上页</li>    <li>1</li>    <li>2</li>    <li class="current">3</li>    <li>4</li>    <li>5</li>    <li>下页</li>    <li>尾页</li>    <li class="pageinfo">第3页</li>    <li class="pageinfo">共8页</li>  </ul></body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
第三种代码:
css代码:

复制代码代码如下:

#page{margin:5px; padding-bottom:20px; padding-top:20px;}
#page a{border:1px solid #003399;padding:5px;margin:2px;background-color:#FFFFFF;color:#003300;height:18px; }
#page a:hover{font-size:14px; color:#FFFFFF; background-color:#003399;padding:5px;margin:2px;height:20px;}

效果图片.

这是mouse没的指上时.

这是指上去时,

好了现在我们来看看怎么使用这代码.

html代码:

复制代码代码如下:

上一条：
用css filter做鼠标滑过图片效果
下一条：
欲练CSS ，必先解决IE的一些细节分析

0条评论 (评论内容有缓存机制,请悉知!)

最新最热

相关文章
使用 Alpine.js 排序插件对元素进行排序(0个评论)
在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
使用mock-server实现模拟接口对接流程步骤(0个评论)
vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)

近期文章
opencode + Oh-my-openagent,我的第一个免费的ai编程智能体管家:Sisyphus(0个评论)
Google AI Studio升级全栈 vibe coding体验，可直接构建带登录和数据库的应用(0个评论)
Apifox桌面端被曝遭供应链投毒：CDN 脚本被篡改，窃取 SSH 密钥与 Git 凭证(0个评论)
在go语言中实现字符串可逆性压缩及解压缩功能(0个评论)
使用go + gin + jwt + qrcode实现网站生成登录二维码在app中扫码登录功能(0个评论)
在windows10中升级go版本至1.24后LiteIDE的Ctrl+左击无法跳转问题解决方案(0个评论)
智能合约Solidity学习CryptoZombie第四课:僵尸作战系统(0个评论)
智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)

近期评论
test1 在
opencode + Oh-my-openagent,我的第一个免费的ai编程智能体管家:Sisyphus中评论 test..
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人..
Zita 在
Google AI Studio升级全栈 vibe coding体验，可直接构建带登录和数据库的应用中评论 111222..
123 在
Clash for Windows作者删库跑路了，github已404中评论按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分..
原梓番博客在
在Laravel框架中使用模型Model分表最简单的方法中评论好久好久都没看友情链接申请了，今天刚看，已经添加。..

Top