代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>翻页</title>

    <style type="text/css">

        .pagenation{

            list-style: none;

            margin:0;

            padding:0;

            width:600px;

            height:40px;

            border:1px solid #000;

            font-size:0; /* 取消间隙 */

            text-align:center;

        }

        .pagenation li{

            display:inline-block;

            height:26px;

            /*background-color: gold;*/

            font-size:12px;

            margin-top:7px; /* 设置水平居中 */

            margin-left:5px;  /* 设置左右间隙 */

        }

        .pagenation li a{

            display:block;

            height:26px;

            line-height:26px;

            padding:0 10px;

            text-decoration:none;

            font:normal 12px/26px "Microsoft YaHei";

            color:#000;

            background-color: gold;

        }

        .pagenation li a:hover{

            color:#fff;

            background-color:red;

        }

    </style>

</head>

<body>

<!-- 规范的做法还是用ul、li  -->

<ul class="pagenation">

    <li><a href="#">上一页</a></li>

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

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

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

    <li><span>...</span></li>

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

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

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

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

    <li><a href="#">下一页</a></li>

</ul>

</body>

</html>

页面效果：

css 制作翻页布局的更多相关文章

  1. css实现翻页效果

    如图,鼠标移动到图上,实现右上角翻页的效果,本例主要border边框的设置. 一.基本概念 <html> <head> <style> #demo{ width:0 ...

  2. 使用ScrollRect制作翻页

    1.标准的层级结构 ScrollRect->ViewPort->Content,Viewport负责显示区域的大小一般和Mask一起配合使用,Content使用Layout来布局,如果想使 ...

  3. css 制作导航条布局

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  4. [Qt] CFlip 翻页功能实现

    由于需要给table制作翻页功能,所以写了一个翻页的类. 看上去总体效果感觉还是不错的,哈哈. //flip.h #ifndef CFLIP_H #define CFLIP_H #include &l ...

  5. flex布局构建大屏框架并支持翻页动画、滚动表格功能

      本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...

  6. 简单3D翻页相册制作教程

    3D效果看起来总是要比平面的图形看起来视觉效果要好的多,今天来教大家制作简单的3D翻页效果的视频. 视频预览链接:https://v.youku.com/v_show/id_XMzgxOTY5NzQz ...

  7. css翻页样式

    /*=======================翻页样式===========================*/.pages { width: 660px; text-align: center; ...

  8. HTML5开发的翻页效果实例

    简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20t ...

  9. 颗粒翻页（css3效果展示）

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

随机推荐

  1. python14 1.带参装饰器 | wrapper 了了解 # 2.迭代器 ***** # 可迭代对象 # 迭代器对象 # for迭代器 # 枚举对象

    ## 复习 '''函数的嵌套定义:在函数内部定义另一个函数 闭包:被嵌套的函数 -- 1.外层通过形参给内层函数传参 -- 2.验证执行 开放封闭原则: 功能可以拓展,但源代码与调用方式都不可以改变 ...

  2. SQL随记(二)

    1.purge关键字:可以清除oracle 回收站(recyclebin)中的表和索引并释放与其相关的空间,还可清空回收站,或者清除表空间中记录的已删除的部分表空间.但是purge后不能回滚和恢复. ...

  3. Python实现聚类算法AP

    1.算法简介 AP(Affinity Propagation)通常被翻译为近邻传播算法或者亲和力传播算法,是在2007年的Science杂志上提出的一种新的聚类算法.AP算法的基本思想是将全部数据点都 ...

  4. ZooKeeper-集群模式安装

    下载地址:https://zookeeper.apache.org/releases.html 至少需要准备三台节点(这里为h136.h138.h140),ZooKeeper 需要 JDK,关于 JD ...

  5. ACM-ICPC 2018 徐州赛区网络预赛 F Features Track（STL模拟）

    https://nanti.jisuanke.com/t/31458 题意 有N个帧,每帧有K个动作特征,每个特征用一个向量表示(x,y).两个特征相同当且仅当他们在不同的帧中出现且向量的两个分量分别 ...

  6. command not found

    1.问题(problem) #wget gzip.x86_64 0:1.5-10.el7 -bash: wget command not found 2.解决(solution) 两个都能用 yum ...

  7. [Android] Android RxJava2+Retrofit2+OkHttp3 的使用(一) --基础篇 Retrofit2 的使用

    本文是 Android RxJava2+Retrofit2+OkHttp3 的使用(一) --基础篇 Retrofit2 的使用 本文的目标是用 Retrofit写一个网络请求: 本文以从获取天气预报 ...

  8. 同步Name到Comment 及 同步 Comment 到Name

    在 PowerDesigner执行命令  Tools->Execute Commands->Edit/Run Scripts 代码一:将Name中的字符COPY至Comment中 Opti ...

  9. [译]Ocelot - Load Balancer

    原文 可以对下游的服务进行负载均衡. 提供了下面几种负载均衡: LeastConnection - tracks which services are dealing with requests an ...

  10. win10安装VMware v14.1.1.28517

    一.下载 VMware v14.1.1.28517 下载地址(包含安装说明):http://www.downza.cn/soft/74728.html 二.VMware Workstation 14 ...