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. HBase基础之Hbase shell常用操作

    一般操作 查看服务器状态 status 查看hbase版本 version DDL操作 创建表 create 'member','member_id','address','info' 创建了3个列族 ...

  2. 学习MongoDB 四： MongoDB查询（一）

    一.简介 MongoDB提供了db.collection.find() 方法可以实现根据条件查询和指定使用投影运算符返回的字段省略此参数返回匹配文档中的所有字段. 二．db.collection.fi ...

  3. 在windows 下将 chm 格式的文件 转换成 html 的文件

    有时我们可能需要将 chm 格式的文件 转换成 html 格式的网页文件,这时,如果你使用的是 windows 操作系统,那就可以用 windows 操作系统自带的反编译工具来完成这项任务,具体步骤: ...

  4. redis实现分布式锁 转自importnew 记录一下

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  5. 使用html和CSS进行网页网站设计 -- 简明步骤

    网页制作流程: 1. 心中有规划,网站的骨架结构,页面布局layout. 2. 创建一个用于创建模板dwt的html页: main.html 3. 制作main.html: (1) 在html文件中依 ...

  6. load data

    LOAD DATA INFILE 'D:\GX\\mm.txt' REPLACE INTO TABLE mm FIELDS TERMINATED BY ' ' // 以空格为分隔符插入数据,前提是mm ...

  7. apo 简单参考

    参考: https://www.cnblogs.com/Geyoung/p/6927905.html @Aspect @Component public class TimeAspect { //通过 ...

  8. spring_cxf_basic_sender

    jar applicationContent.xml <?xml version="1.0" encoding="UTF-8"?> <bean ...

  9. leetcode937

    public class Solution { public string[] ReorderLogFiles(string[] logs) { var list1 = new List<str ...

  10. 8. mybatis实战教程(mybatis in action)之七:实现mybatis分页(源码下载)

    转自:https://blog.csdn.net/tangruyi1992/article/details/52584012 上 一篇文章里已经讲到了mybatis与spring MVC的集成,并且做 ...