代码：

<!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. bootstrap浅谈

    学习地址:http://www.runoob.com/bootstrap/bootstrap-tutorial.html 自己练习了下 主要是使用了bootstrap中包含的class类样式,只要给相 ...

  2. Pandas系列（七）-计算工具介绍

    内容目录 1. 统计函数 2. 窗口函数 3. 加深加强 数据准备 # 导入相关库 import numpy as np import pandas as pd #Pandas 中包含了非常丰富的计算 ...

  3. nginx缓存设置（expires）

    一.expires功能说明 nginx缓存的设置可以提高网站性能,对于网站的图片,尤其是新闻网站,图片一旦发布,改动的可能是非常小的,为了减小对服务器请求的压力,提高用户浏览速度,我们可以通过设置ng ...

  4. Entity Framework入门教程（1)---Entity Framework简介

    什么是Entity Framework 学习EF的前提:熟练使用Linq和Ado.net,因为在使用EF框架进行开发时,我们大多数情况使用Linq进行查询和操作,而EF的底层实现用的是Ado.net. ...

  5. NOI-OJ 2.2 ID:8758 2的幂次方表示

    思路 可以把任意一个数转化为2^a+2^b+2^c+...+2^n 例如137的二进制为10001001,这就等效于2^7+2^3+2^0 以上结果如何通过程序循环处理呢?需要把数字n分解为上述公式, ...

  6. JN_0005：PS改变图片指定内容颜色

    1,打开图片. 2,选择选区,抽取出独立图存 选中选区,按ctrl + alt + j ,抽取图层. 3,选中图层,再按住 ctrl,点击图层图标 的白色选区处,即可选中图层中的内容. 4,选中图层内 ...

  7. Node.js实战项目学习系列(3) CommonJS 模块化规范

    前言 想开始编写Node.js代码,那么我们就必须先熟悉它的模块化规范CommonJS,本文将详细讲解CommonJS规范 本文代码 >>> github 地址 CommonJS N ...

  8. HTML（三）HTML属性

    HTML 属性 属性: [class] 规定元素的一个或多个类 注意: 类不能以数字开头 class = "classA classB" // 多个类的写法 [id] 规定元素的唯 ...

  9. 《11招玩转网络安全》之第一招：Docker For Docker

    玩转黑客那些工具,缺少了虚拟机怎么行,除了用虚拟机虚拟整个系统,Docker也不能缺少,读者只需要知道,Docker只虚拟Linux系统中的某个程序就可以了.本节就来介绍Linux下安装设置Docke ...

  10. springMVC源码笔记

    springMVC 设计总览 下图来源:https://www.cnblogs.com/fangjian0423/p/springMVC-directory-summary.html 下图来源:htt ...