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. Windows10右键添加“在此处打开命令窗口"

    今天跑代码时用到了Powershell,有一个环境变量死活都找不到,无奈只好重新回到cmd命令行测试,结果立马就跑通了.-_-||  由于现在Win10默认右键只有Powershell,所以为了以后方 ...

  2. 用docker搭建php+nginx+laravel的开发环境

    制作镜像 由于官方php:7.2.2-fpm-alpine3.7 镜像不含composer,而单独做一个composer镜像又会依赖php镜像,所以应该在php镜像中添加composer.Docker ...

  3. css sprite实例

    css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...

  4. storm的可靠性

    消息确认机制: 在数据发送的过程中可能会数据丢失导致没能接收到,spout有个超时时间(默认是30S),如果30S过去了还是没有接收到数据,也认为是处理失败. 运行结果都是处理成功 参考代码Storm ...

  5. LRU的理解与Java实现

    简介 LRU(Least Recently Used)直译为"最近最少使用".其实很多老外发明的词直译过来对于我们来说并不是特别好理解,甚至有些词并不在国人的思维模式之内,比如快速 ...

  6. PyQt5系列教程(七)控件

    软硬件环境 Windows 10 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.4 前言 控件是PyQt应用程序的基石.PyQt5自带很多不同的控件,包括像button.ch ...

  7. JAVA servlet 上传文件(commons-fileupload, commons-io)

    <1>获取二进制文件流并输出 InputStream inputStream = request.getInputStream(); BufferedReader reader = new ...

  8. json小知识

    json转换新方法 上面是把一个json数组转换成map集合 fromObject()是通用的 map集合,bean对象,String转换成json 文件转换成字符串,在转换成json 生成json文 ...

  9. jdk免安装对应配置

    通常我们不用配置jdk,tomcat和eclipse会选取系统的环境变量获取jdk,但有时一个系统中部署不同的项目,各版本又不一样,不能完全兼容. 因此就需要采用自己的jdk.将jdk安装后,将安装后 ...

  10. Java并发知识(2)

    1. 什么是原子操作?在Java Concurrency API中有哪些原子类(atomic classes)? 原子操作是指一个不受其他操作影响的操作任务单元.原子操作是在多线程环境下避免数据不一致 ...