效果如下:
<style>内代码如下:
1 <!--分页显示效果--> 2 <style type="text/css"> 3 4 /*设置div样式的整体布局*/ 5 .page-icon{ 6 margin:20px 0 0 0;/*设置距离顶部20像素*/ 7 font-size:0;/*修复行内元素之间空隙间隔*/ 8 text-align:center;/*设置内容居中显示*/ 9 } 10 11 /*设置共有的的样式布局,主要是进行代码优化,提高运行效率*/ 12 .page-icon a,.page-disabled,.page-next{ 13 border:1px solid #ccc; 14 border-radius:3px; 15 padding:4px 10px 5px; 16 font-size:14PX;/*修复行内元素之间空隙间隔*/ 17 margin-right:10px; 18 } 19 20 /*对 a 标签进行样式布局 */ 21 .page-icon a{ 22 text-decoration:none;/*取消链接的下划线*/ 23 color:#005aa0; 24 } 25 26 .page-current{ 27 color:#ff6600; 28 padding:4px 10px 5px; 29 font-size:14PX;/*修复行内元素之间空隙间隔*/ 30 } 31 32 .page-disabled{ 33 color:#ccc; 34 } 35 36 .page-next i,.page-disabled i{ 37 cursor:pointer;/*设置鼠标经过时的显示状态,这里设置的是显示状态为小手状态*/ 38 display:inline-block;/*设置显示的方式为行内块元素*/ 39 5px; 40 height:9px; 41 background-image:url(http://img.mukewang.com/547fdbc60001bab900880700.gif);/*获取图标的背景链接*/ 42 } 43 .page-disabled i{ 44 background-position:-80px -608px; 45 margin-right:3px; 46 } 47 48 .page-next i{ 49 background-position:-62px -608px; 50 margin-left:3px; 51 } 52 </style>
<div>内代码如下:
1 <div class="page-icon"> 2 <span class="page-disabled"><i></i>上一页</span> 3 <span class="page-current">1</span> 4 <a href="#">2</a> 5 <a href="#">3</a> 6 <a href="#">4</a> 7 <a href="#">5</a> 8 <a href="#">6</a> 9 <a href="#">7</a> 10 …… 11 <a href="#">199</a> 12 <a href="#">200</a> 13 <a class="page-next" href="#">下一页<i></i></a> 14 </div>
CBAM(Convolutional Block Attention Module)使用指南
j2ee web项目 ssh 中使用junit测试
log4j 发送日志到邮箱
java.util.ConcurrentModificationException
java 项目 报错
json 传参数到action中 乱码
TOMCAT 信息
action 纯注解 笔记
java 上传图片 打水印
- 最新文章
-
【vim使用】末行命令的扩展、总结
【vim使用】利用可视块模式给多行代码添加注释
【vim使用】编辑命令 与 数字 连用
【vim使用】插入命令:命令模式 --> 编辑模式
基于html5的动画库,非svg和canvas
各种网页上可以嵌入的表
mysql root设置密码 linux
SVG布局
rest service技术选型
css划斜线
- 热门文章
-
SSL_TLS
在liberty中通过LTPA设置单点登录
[转]使用 LDAP 组或角色限制访问,包含部分单点登录SSO说明
用python制作训练集和测试集的图片名列表文本
Face-anti-spoofing实验记录(通过val_public_list.txt制作val数据集)
基于MXNet的im2rec.py的debug
Intel发布神经网络压缩库Distiller:快速利用前沿算法压缩PyTorch模型——AttributeError: module ‘tensorboard' has no attribute 'lazy'
A Hybrid Data Association Framework for Robust Online Multi-Object Tracking(2017 IEEE Transactions on Image Processing)
显卡1060和1660测试对比
Multi-hierarchical Independent Correlation Filters for Visual Tracking(MFT)略读