css 分页效果

无标题文档

#page a{
display:block;
border:1px solid red;
background:black;
color:white;
width:20px;
height:20px;
float:left;
margin-left:10px;
text-align:center;
text-decoration:none;
font-size:12px;
}
#page a.current:link,#page a.current:visited{
background:white;
color:black;
}
#page a.page_:link,#page a.page_:visited{
background:blue;
width:50px;
}

上一页
1
2
3
4
5
6
7
8
9
10
下一页

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • css 分页效果

    无标题文档 #page a{ display:block; border:1px solid red; background:black; color:white; width:20px; height:20px; float:left; margin-left:10px; text-align:center; text-decoration:none; font-size:12px; } #page a.current:link,#page a.current:visited{ backgro

  • JS+CSS实现的拖动分页效果实例

    本文实例讲述了JS+CSS实现拖动分页效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动分页</title> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <style> body{ border:0px; margin:0px; overflow:hidden; backgrou

  • Vue form 表单提交+ajax异步请求+分页效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-

  • 简单实现Ajax无刷新分页效果

    简单实现Ajax无刷新分页效果

    Ajax无刷新分页效果,如下代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax无刷新分页效果</title> <script type="text/javascript"> function showpage(url) { var xhr = new XML

  • PHP使用Mysqli类库实现完美分页效果的方法

    PHP使用Mysqli类库实现完美分页效果的方法

    本文实例讲述了PHP使用Mysqli类库实现完美分页效果的方法.分享给大家供大家参考,具体如下: 本篇文章是基于的是我的上篇文章<PHP数据库操作之基于Mysqli的数据库操作类库>而量身打造,怎么使用 M 类库中的 FetchAll 方法做出完美分页. 分页在我们每个项目中都是必不可少的,而且出现的频率非常之多.这样就要求我们程序员在项目中怎样去以最快的速度.最简洁的代码去实现分页方案. 分页的实现大部分是依据 URL 传入的参数(一般是page)来实现,比如:http://localhos

  • jsp页面数据分页模仿百度分页效果(实例讲解)

    废话不多说,直接上代码 请根据自己的项目.包名修改 <%@page import="web09.shop.DBUtil"%> <%@page import="java.sql.ResultSet"%> <%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.Connection"%> <%

  • css分页样式代码

    css分页样式代码

    第一个是从360而来的效果如图所示:普通的a标记的分页,兼容性好.绿色样式演示代码: .pages{ width:100.5%; text-align:right; padding:10px 0; clear:both;} .pages span,.pages a,.pages b{ font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0 2px;} .pages span font{ color:#f00; font

  • Bootstrap与KnockoutJs相结合实现分页效果实例详解

    Bootstrap与KnockoutJs相结合实现分页效果实例详解

    KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端.在做的过程中,遇到一个问题--如何使用KnockoutJs来完成分页的功能.在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用Knockou

  • jQuery实现仿腾讯视频列表分页效果的方法

    jQuery实现仿腾讯视频列表分页效果的方法

    本文实例讲述了jQuery实现仿腾讯视频列表分页效果的方法.分享给大家供大家参考.具体如下: 这里使用jQuery仿腾讯视频列表分页效果,无刷新分页特效,点击分页按钮,无刷新进入下一页内容列表. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

  • PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用

    PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用

    jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动. 调用jPaginate插件的方法很简单: $(elementID).paginate() 属性设置 可喜的是,jPaginate提供了很多属性配置,您可以轻易的定制想要的分页效果. 设置方法如: $(elementID).paginate({ count:80, start:1, ... }) count: 数字,总

随机推荐