CSS分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中分页DIV CSS</title>
<style>
.pages{text-align: center;}
.pages li{display: inline-block;margin:5px 1px 0 0;}
.pages a{display:block;color: #000;height:23px;line-height:23px;padding:0 8px;background:#fff;border:1px solid #e5e5e5;text-decoration: none;}
.current a,.pages a:hover{background: blue;color: #fff}
.not_current a{cursor:not-allowed;color: #ccc}
.not_current a:hover{background:#fff;color: #ccc}
</style>
</head>
<body>
<ul class="pages">
<li class="not_current"><a href="javascript:void(0)">首页</a></li> <li class="not_current"><a href="javascript:void(0)"><</a></li>
<li class="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><span>...</span></li>
<li><a href="#">></a> </li>
<li><a href="#">尾页</a> </li>
</ul>
</body>
</html>
javascript:void(0)点击A防止跳转和跳动,让它保持原来的位置,这里不用用其他标签也行,反正这里是到头的时候不给点击。根据你们后台选择适合的标签。
效果
CSS分页的更多相关文章
- CSS 分页实例
CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html> ...
- css总结14:CSS 分页实例
1 作用:如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 例1 :以下实例演示了如何使用 HTML 和 CSS 来创建分页: 正常样式 <!DOCTYPE html>< ...
- asp.net 分页-利用后台直接生成html分页
一直想做一个属于自己的分页, 1:我试过用datapage,虽然是很好用,但是必须要配合datalist才能使用,感觉不太好 2:自己写分页控件,目前正在摸索中,关键是怎么分页的问题,有的是用data ...
- Js_分页
public ActionResult Index(int? pageIndex) { List<string> data = new List<string>(); ; i ...
- angularjs使用directive实现分页组件
闲来没事,分享下项目中自己写的分页组件.来不及了,直接上车. 效果: 输入框可任意输入,并会自动提交到该页 html: <ul class="page clearfix"&g ...
- 在angular中利用分页插件进行分页
必需:angular分页js和css 当然还有angular.js 还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...
- 这两天自己模仿写的一个Asp.Net的显示分页方法 附加实体转换和存储过程
之前自己一直用Aspnetpager控件来显示项目中的分页,但是每次都要拖一个aspnetpager的控件进去,感觉很不舒服,因为现在自己写的webform都不用服务器控件了,所以自己仿照aspnet ...
- C# 分页方法
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web; ...
- django【自定义分页】
1. views.py def app(request): page_info = PageInfo(request.GET.get('p'), 6, 100, request.path_info, ...
随机推荐
- lua 可变参数
问题:对可变参数传递的时候,采用如下方案: local cellData = {MsgText = msgText,Param = ...,CallBackFunc = callBackFunc,Ca ...
- NEC学习 ---- 模块 - 上图下文图文列表
上图下文图文列表的效果如下图: 可以看到三个红色框中的三中"上图下文的图文列表"; 这里的代码其实没什么问题, 对于这种布局, 其实可以参考我上一篇介绍: NEC学习 ---- 模 ...
- Any changes made by a writer will not be seen by other users of the database until the changes have been completed
https://en.wikipedia.org/wiki/Multiversion_concurrency_control Multiversion concurrency control (MCC ...
- 序列化(Serialization)据为JSONP远端请求
Insus.NET前些日子,有分享了一段代码,<使用JSONP跨域请求数据>http://www.cnblogs.com/insus/p/3512271.html 是使用jQuery的Da ...
- MySQL- -Join语法解析与性能分析
Mysql Join语法解析与性能分析 一.Join语法概述 join 用于多表中字段之间的联系,语法如下: ... FROM table1 INNER|LEFT|RIGHT JOIN table2 ...
- TCP/IP协议 三次握手与四次挥手
一.TCP报文格式 TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷本.下面是TCP报文格式图: 图1 TCP报文格式 上图中有几个字段需要重点介绍下: (1)序号 ...
- Maven聚合与继承的实例讲解(一)
概述 在javaweb高速发展的今天,我们软件设计人员往往会用很多种方式对软件划分模块,目的就是为了能有清晰的设计和低耦合性的,高重用性的软件.Maven有很好的依赖管理系统(Dependency M ...
- MySql 首记
1.连接数据: 格式是: -P 端口号 -h mysql主机名\ip -u root (用户) -p 2.显示数据库: show databases; 3.选择数据库: use databas ...
- 最快速的Android开发环境搭建ADT-Bundle及Hello World
ADT-Bundle for Windows 是由Google Android官方提供的集成式IDE,已经包含了Eclipse,你无需再去下载Eclipse,并且里面已集成了插件,它解决了大部分新手通 ...
- odd_even_list
public class Solution { public ListNode OddEvenList(ListNode head) { if(head == null || head.next == ...