html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>123</title>

<style>

ul.pagination {

    display: inline-block;

    list-style-type: none;

    /*padding: 0;*/

    /*margin: 0;*/

}

/*设置为内联标签 然后就变为横排了*/

ul.pagination li {display: inline;}

ul.pagination li a {

    color: blue;

    /*float: left;*/

    padding: 8px 16px;

    border: 1px solid black;

    border-radius: 10px;

    text-decoration: none;

}

    ul.pagination li {

        margin-right:1em;

    }

    ul.pagination a:hover,ul.pagination a:focus {

        color: white;

        background-color: blue;

    }

</style>

</head>

<body>

<h2>简单的分页</h2>

<ul class="pagination">

  <li><a href="#">«</a></li>

  <li><a href="#">1</a></li>

  <li><a class="active" href="#">2</a></li>

  <li><a href="#">3</a></li>

  <li><a href="#">4</a></li>

  <li><a href="#">5</a></li>

  <li><a href="#">6</a></li>

  <li><a href="#">7</a></li>

  <li><a href="#">»</a></li>

</ul>

</body>

</html>

分页

效果：如下

css简单分页的更多相关文章

  1. JavaScript简单分页，兼容IE6，~3KB

    简介 兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页. 使用 Browser <link rel="stylesheet" href="css/GB-pa ...

  2. MVC001之mvcpager简单分页

    描述:用mvcpager实现简单分页功能 参考网址: http://www.cnblogs.com/iamlilinfeng/archive/2013/03/11/2951460.html http: ...

  3. ASP.NET MVC 简单分页代码

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  4. Asp.net MVC 简单分页 自做简单分页

    Asp.net MVC 简单分页:   public static string Pager(int page,int pageSize,int total)         {           ...

  5. 通过 Django Pagination 实现简单分页

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 当博客上发布的文章越来越多时,通常需要进行分页显示,以免所有的文章都堆积在一个页面, ...

  6. 用CSS创建分页的实例

    总结介绍如何通过使用 CSS 来创建分页的实例. ㈠简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DO ...

  7. css3 calc()：css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  8. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  9. MVC简单分页

    对Car汽车表分页 实现简单分页,放在这里方便查看回顾,自定义每页几条有点问题,有待完善······ 1.新建mvc项目 2.添加linq to sql 数据库连接 3.添加CarBF类 using ...

随机推荐

  1. 「SHOI2015」自动刷题机

    /* 有理有据的二分答案 因为在过程中最多减到零 所以n越小显然就能刷更多的题 无解时就是无论如何也无法得到k , 这个特判一下即可 */ #include<cstdio> #includ ...

  2. BFC概念及应用

    定义 块级格式化上下文   特性 1.内部box在垂直方向,一个接一个放置 2.box垂直方向的间距由margin决定    属于同一个BFC的相邻box的margin会发生重叠(外边距重叠)    ...

  3. NHibernate.Cfg.HibernateConfigException

    在用NHibernate 框架做web 项目时,当项目被成功编译后,按F5 启动调试时,一开始就出现这个错误,刚开始就很郁闷,到底出在哪里?连自己都 不知道,在网上搜来搜去,找了很多的资料终于弄明白了 ...

  4. DOM实战-js todo

    1.需求: 实现一个如下页面: 最上面是输入框,后面是add按钮,输入文本点击add按钮,在下面就会出现一行,下面出现的每行最前面是两个按钮,然后后面是todo(要做的事) 第一个按钮是完成按钮,第二 ...

  5. hdu 4370 0 or 1，最短路

    题目描述 给定n * n矩阵C ij(1 <= i,j <= n),我们要找到0或1的n * n矩阵X ij(1 <= i,j <= n). 此外,X ij满足以下条件: 1. ...

  6. ELK配置过程初次安装使用心得--elasticsearch5.4版--及logstash

    安装所遇到的问题:http://www.bubuko.com/infodetail-1889252.html 一,先创建用户和组groupadd es useradd -g es es passwd  ...

  7. C#_Markov_心得感想

    来到实验室正好有一个月了,趁着端午假期稍微轻松一些,在大改程序体系之前,想将自己在这30天中工作之一Markov回顾一下,将从真实的写程序中学习到的知识.思想记录下来.希望能和大家积极讨论! 本文会以 ...

  8. xe7 控件升级

    rm.ehlib.synedit OK SynSQLSyn1->TableNames 为NULL,导致添加数据失败,XE6正常 放在按钮里也不正常,就不说初始化次序引起的.

  9. Astah professional 7.2

    分享Astah professional 7.2下载和破解: 官方下载地址:http://astah.net/download 1.免费的community版本 链接:http://pan.baidu ...

  10. 安卓上为什么不能用system.io.file读取streammingAssets目录下的文件

    首先,看文档: Streaming Assets   Most assets in Unity are combined into the project when it is built. Howe ...