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. 【Linux_Unix系统编程】chapter6 进程

    chapter6 进程 重点关注进程虚拟内存的布局及内容.6.1 进程和程序 进程(process)是一个可执行程序(program)的实例. 程序是包含了一系列信息的文件,这些信息描述了如何在运行时 ...

  2. 面向服务的SOA架构与服务总线ESB

    之前的软件的开发主要是面向对象的编程架构 方法---对象---模块---组件---服务,感觉现在的开发的主流的软件架构的设计思想都是对其进行重用,只不过范围越来越大,有一个系统之间进行通信到多个系统之 ...

  3. linnux-shell知识

    awk 是单行处理文本 正则: cat test.py | awk '/a/ {print $1}'  # 如果test.py中存在a这个字母,就打印所在行的第一列(注意是该列,不是该词).匹配成功, ...

  4. uva-539-枚举

    题意: 给你一个无向图,找最长路. 俩份代码,感觉map[][]简单易懂啊 #include<stdio.h> #include<iostream> #include<s ...

  5. 温故而知新复习下PHP面向对象

    面向对象在PHP中是以类的形势展示的 PHP中的类是单继承的,用关键字extends来实现继承父类, 关键字public protected private 第一个是公开的 谁都可以访问,第二个只能本 ...

  6. 1.line (线)

    1.横线 HTML代码: 横线(水平线) <hr/> <div class="row"> 横线(盒子上边框线) </div> CSS代码: .r ...

  7. 使用 C++11 编写类似 QT 的信号槽——下篇

    要实现 Signal-Slot,Signal 类中应该拥有一个保存 std::function 的数组: template<class FuncType> class Signal { p ...

  8. WDA-FPM-4-用OVP做查询跳转到明细

    转载:https://www.cnblogs.com/sapSB/p/10100697.html   FPM四:用OVP做查询跳转到明细 前面做了查询的UIBB配置,在这边可以直接复用,查询的feed ...

  9. Winform 窗体关闭事件

    //窗体关闭前事件 private void FrmMain_FormClosing(object sender, FormClosingEventArgs e) { DialogResult res ...

  10. iOS 真机调试 Xcode 显示 device Error: device unavailable

    一般来说有两个原因: 1. iphone没有加到test device里,将iphone的设备id加到test device列表里 2. Xcode不支持当前的iOS版本,将Xcode升级到最新版