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. FastAdmin + uni-app
			
    FastAdmin + uni-app FastAdmin https://www.FastAdmin.net uni-app http://uniapp.dcloud.io/ 自己先挖个坑.
    
			
    2. 
						
  2. emqtt 3 (我要subscribe 这个topic)
			
    这一次,主要分析client subscribe 某个topic 的处理流程. 由protocol开始 是的,还是要从protocol开始,至于为什么,之前就说过了. subscribe 类型的pac ...
    
			
    3. 
						
  3. git 本地文件里内容 操作记录
			
    本地环境文件合并分支(以下的都分别 commit提交了的) [一.分支[追加] 和 [新增] 新信息 合并主线  情景] 分支内容: dr.find_element_by_id("su&qu ...
    
			
    4. 
						
  4. 配置MapReduce插件时，弹窗报错org/apache/hadoop/eclipse/preferences/MapReducePreferencePage : Unsupported major.minor version 51.0（Hadoop2.7.3集群部署）
			
    原因: hadoop-eclipse-plugin-2.7.3.jar 编译的jdk版本和eclipse启动使用的jdk版本不一致导致.  解决方案一: 修改myeclipse.ini文件即可解决.  ...
    
			
    5. 
						
  5. SQL Server2005中文版x64安装29506错误解决办法
			
    在使用SQL Server 2005简体中版安装时,使用X86(32位操作系统下)安装没有出现任何问题.可是在X64(64位操作系统下)安装过程没有出现问题,可是安装完成后却没有Microsoft S ...
    
			
    6. 
						
  6. niosII SDRAM ,FLASH （学习特权）
			
    环境: quartus v13.0  64位. DE2 cycloneII EP2C35F672C6N (学校的开发板,还是想同学借的呵呵) 主要实现flash的烧录,虽然实现了但是还是有很多运气的成 ...
    
			
    7. 
						
  7. springboot成神之——application.properties所有可用属性
			
    application.properties所有可用属性 # =================================================================== # ...
    
			
    8. 
						
  8. Python之二维数组N*N顺时针旋转90度
			
    需求:把一个二维数组顺时针旋转90度,现实数据的替换. 比如把4*4的二维数组顺时针旋转90度 原始数据是一个嵌套列表:[['A', 'B', 'C', 'D'], ['A', 'B', 'C', ' ...
    
			
    9. 
						
  9. 第二章 Java内存区域与内存溢出异常（待续）
			
    ·········
    
			
    10. 
						
  10. leetcode784
			
    这道题经过独立思考,通过使用二进制编码的方式来进行处理.分几个步骤一层一层的处理,最终解决了,这道题感觉应该属于medimu级别. public class Solution { /// <su ...
    
			
    11.