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. python之路_函数实例及装饰器介绍

    一.习题讲解 1.写函数,返回一个扑克牌列表,里面有52项,每一项是一个元组.例如:[(‘红心’,2), (‘草花’,2), …(‘黑桃,‘A’)] def cards(): num=[] for v ...

  2. python之路之装饰器

    一 装饰器进化之路1) import time def index(): start_time=time.time() time.sleep() print('welcome to index wor ...

  3. Java反射机制 —— 简单了解

    一.概述 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为jav ...

  4. JavaScript中判断函数、变量是否存在

    转载:http://www.jb51.net/article/67551.htm 一.是否存在指定函数 function isExitsFunction(funcName) { try { if (t ...

  5. windows巡检

    参考网站:   http://www.jb51.net/os/windows/525017.html 系统自带工具巡检  : 先说说如何检查系统健康度的方法,Win+R只有只要输入一个命令: perf ...

  6. ASP.NET的gridview设置数据格式(DataFormatString="{}") 2011年04月08日 16:26:00 阅读数：5318 标签： asp.net datagrid integer asp date strin

    select convert(numeric(8,2),round(UnTaxAmount,2))as UnTaxAmount from View_SaleVoiceselect   cast(UnT ...

  7. shiro用authc配置后登录成功后不能跳转到index页面

    转自:https://ydoing.iteye.com/blog/2248188

  8. apache http get 和 post 请求

    1.首先要把jar依赖进项目 <dependency> <groupId>org.apache.httpcomponents</groupId> <artif ...

  9. 基于OpenGL编写一个简易的2D渲染框架-05 渲染文本

    阅读文章前需要了解的知识:文本渲染 https://learnopengl-cn.github.io/06%20In%20Practice/02%20Text%20Rendering/ 简要步骤: 获 ...

  10. UI5-文档-4.33-Routing Back and History

    现在我们可以导航到细节页面并显示发票,但是还不能回到概览页面.我们将向细节页面添加一个back按钮,并实现一个函数,再次显示概述页面. Preview A back button is now dis ...