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. #51单片机#蓝牙模块(ATK-SPP-HC06从机串口)的使用方法
			
    #include <AT89X51.H> #include <intrins.h> // 函数原形定义 #define uchar unsigned char #define  ...
    
			
    2. 
						
  2. 十大Java人物
			
    James Gosling : Java之父文/陶文 作 为Java之父,James Gosling的名字可谓是耳熟能详.当人们评论一种编程语言时,总喜欢捎带着把下蛋的母鸡一起带上.Java做为中国的 ...
    
			
    3. 
						
  3. python-mao
			
    冒泡排序算法的运作如下: 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素重复 ...
    
			
    4. 
						
  4. 在ERP软件行业项目应该怎么做？
			
    本人进入软件行业已经有5个年头了,主导实施和参与过的大大小小的项目有20余个.其中有些项目做的非常好,提升了客户企业的管理水平,也规范了企业的业务操作水平,优化了企业的流程,客户非常认同我们实施的价值 ...
    
			
    5. 
						
  5. PCIE接口的说明
			
    https://blog.csdn.net/u013253075/article/details/80835489
    
			
    6. 
						
  6. 在mac上 使用jenkins 执行python文件
			
    1.要选择 [执行 shell]构建
    
			
    7. 
						
  7. jmeter中50%70%80%90%代表的含义
			
    参考 http://www.cnblogs.com/jackei/archive/2006/11/11/557972.html 我的理解是: 在4.08秒响应时间内有50%的用户达到这个4.08的标准 ...
    
			
    8. 
						
  8. mongdb与mysql的联系和区别
			
    与关系型数据库相比,MongoDB的优点:①弱一致性(最终一致),更能保证用户的访问速度举例来说,在传统的关系型数据库中,一个COUNT类型的操作会锁定数据集,这样可以保证得到“当前”情况下的精确值. ...
    
			
    9. 
						
  9. js控制使div自动适应居中
			
    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...
    
			
    10. 
						
  10. delphi  c++builder 判断工程类型 超级系统变量
			
    d:\program files (x86)\embarcadero\studio\16.0\SOURCE\RTL\SYS\SysInit.pas ModuleIsLib: Boolean;      ...
    
			
    11.