1 作用：如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

例1 ：以下实例演示了如何使用 HTML 和 CSS 来创建分页： 正常样式

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <style>        ul.pages {            display: inline-block;            padding: 0;            margin: 0;        }

        ul.pages li {display: inline;}

        ul.pages li a {            color: black;            float: left;            padding: 8px 16px;            text-decoration: none;        }        ul.pages li a:hover{            background: #cecece;        }    </style></head><body>

<h2>简单的分页</h2><ul class="pages">    <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>

------图示：

例2： 圆角分页

ul.pages li a {
    border-radius: 5px;
}

ul.pages li a.active {
    border-radius: 5px;
}

------图示：

例3 ：鼠标悬停过渡效果
ul.pages li a {    transition: background-color .3s;

}

------图示：

 

例4 ：带边框分页

ul.pages li a {

border: 1px solid #666666;

}

------图示：



例5 ：分页间隔:


提示: 你可以使用 margin 属性来为每个页码直接添加空格：


ul.pages li a {


    margin: 0 4px;}




例6：分页字体大小


ul.pages li a


{
 font-size: 22px;
}




例7：左右分页


<li><a href="#">❮</a></li>
  <li><a href="#">❯</a></li>


												


											
css总结14：CSS 分页实例的更多相关文章
	

    
						
  1. CSS 分页实例
		
    CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html>  ...
    
		
    2. 
						
  2. 14 CSS题目附答案
		
    转载自公众号:web前端开发  原文题目:45道CSS基础面试题(附答案) 1. 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content) ...
    
		
    3. 
						
  3. css 伪类选择器:checked实例讲解
		
    css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择 ...
    
		
    4. 
						
  4. java：（json，ajax，path，Oracle的分页实例，Filter拦截器）
		
    1.json: <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...
    
		
    5. 
						
  5. php分页实例附代码
		
    一个典型的PHP分页实例代码分享,学习php的朋友肯定用得到,主要是了解思路: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
    
		
    6. 
						
  6. 奇妙的 CSS shapes(CSS图形)  【css 图形，绘图，CSS 几何图形)】
		
    http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...
    
		
    7. 
						
  7. CSS选择器、CSS hack及CSS执行效率
		
    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...
    
		
    8. 
						
  8. css文本样式-css学习之旅（4）
		
    color:颜色derction:方向:line-height:行高:letter-spaceing:字符间距:text-align:对齐方向:text-decoration:装饰:text-inde ...
    
		
    9. 
						
  9. Html和Css学习笔记-css进阶-盒模型
		
    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
    
		
    10. 
						
  10. css基础--常用css属性02
		
    上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. videojs集成--播放rtmp流
			
    之前说到已经把流推送过来了,这时候就可以使用videojs来进行显示播放. 首先要先有一个文件,那就是video-js.swf 因为,这种播放方式html已经不能很好的进行播放了,需要用到flash来 ...
    
			
    2. 
						
  2. 【转】学习使用Jmeter做压力测试(一)--压力测试基本概念
			
    一.性能测试的概念 性能测试是通过自动化的测试工具模拟多种正常峰值及异常负载条件来对系统的各项性能指标进行测试.负载测试和压力测试都属于性能测试,两者可以结合进行. 通过负载测试,确定在各种工作负载下 ...
    
			
    3. 
						
  3. nginx 的第三方模块ngx_http_accesskey_module 来实现下载文件的防盗链步骤（linux系统下）
			
    nginx 的第三方模块ngx_http_accesskey_module 来实现下载文件的防盗链步骤(linux系统下),安装Nginx和HttpAccessKeyModule模块(参考LNMP环境 ...
    
			
    4. 
						
  4. 地下迷宫探索（dfs）
			
    地下迷宫探索(30 分) 地道战是在抗日战争时期,在华北平原上抗日军民利用地道打击日本侵略者的作战方式.地道网是房连房.街连街.村连村的地下工事,如下图所示. 我们在回顾前辈们艰苦卓绝的战争生活的同时 ...
    
			
    5. 
						
  5. Vue.js：模版语法
			
    ylbtech-Vue.js:模版语法 1.返回顶部 1. Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vu ...
    
			
    6. 
						
  6. 微信小程序的基本认识
			
    小程序与公众号的区别 小程序,不支持关注,消息推送等营销手段. 小程序更倾向于产品,公众号更倾向于营销. 在系统权限方面,小程序能够获得更多. 小程序与APP的区别 小程序,面向微信用户.app面向所 ...
    
			
    7. 
						
  7. 第13章 Spring框架的设计理念与设计模式分析
			
    13.1 Spring的骨骼架构 最核心的组件是:Core, Context, Bean. 13.1.1 Spring的设计理念 Spring最核心的组件是Bean组件.Spring解决的最关键的问题 ...
    
			
    8. 
						
  8. 如何检测   51单片机IO口的下降沿
			
    下降沿检测,说白了就是满足这样一个逻辑,上次检测是1,这次检测是0,就是下降沿. 从这个条件可知,要确保能够正确检测到一个下降沿,负脉冲的宽度,必须大于一个检测周期,当负脉冲宽度小于一个检测周期,就有 ...
    
			
    9. 
						
  9. 解决word自动编号出现内容空格过大的问题
			
    选择你需要调整的段落.右键点击.选择“调整列表缩进” 然后在弹出的窗口中,第三行的“制表符”改成“空格”即可.或者空格都不需要可以改为“不特别标注”. 当编号超过10的时候,也会有空格太大的现象,这时 ...
    
			
    10. 
						
  10. 用yum下载rpm包（不安装）到指定目录
			
    用yum下载rpm包(不安装)到制定目录    用yum下载rpm包   1.安装yum-downloadonly   # yum install yum-downloadonly -y     2. ...
    
			
    11.