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. Servlet概念入门
			
    什么是Servlet Servlet 为创建基于 web 的应用程序提供了基于组件.独立于平台的方法,可以不受 CGI 程序的性能限制.Servlet 有权限访问所有的 Java API,包括访问企业 ...
    
			
    2. 
						
  2. 如何用php+ajax实现页面的局部刷新？（转）
			
    client.html XML/HTML code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE  ...
    
			
    3. 
						
  3. RelativeLayout里的gravity不能居中的解决方法
			
    最近在遇到RelativeLayout里的gravity属性给它复制center_horizontal或者center都不能居中它的子组件,后来找到了替代方法,只要在它的每个子组件里加上android ...
    
			
    4. 
						
  4. Java [parms/options] range -b 100 -c 10 -i 100 -t 300 -s 180
			
    3 down vote Just run the command java -X and you will get ans of all_ C:\Users\Admin>java -X -Xmi ...
    
			
    5. 
						
  5. java求10!的阶乘
			
    package com.aaa; //求10!的阶乘 public class Cheng { public static void main(String[] args) { int s=1; fo ...
    
			
    6. 
						
  6. win10 Edge 无法上网代理服务器错误
			
    当连接好网络时 Edge无法上网,提示代理服务器错误,系统其他非第三方软件同样网络异常 解决:为当前所连接的网络更新自动检测 控制面板->网络和Internet->Internet选项-& ...
    
			
    7. 
						
  7. ATM：模拟实现一个ATM + 购物商城程序
			
    额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 提供还款接口 ATM记录操作日志 提供管理接 ...
    
			
    8. 
						
  8. js实现的点击div区域外隐藏div区域
			
    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对 ...
    
			
    9. 
						
  9. python构造远控
			
    server端: import socket import subprocess server=socket.socket() server.bind(('127.0.0.1',4444)) serv ...
    
			
    10. 
						
  10. 第一章 Spring整体架构和环境搭建（待续）
			
    ········
    
			
    11.