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. SQL语言分为五大类
			
    SQL语言分为五大类:DDL(数据定义语言) - Create.Alter.Drop 这些语句自动提交,无需用Commit提交.DQL(数据查询语言) - Select 查询语句不存在提交问题.DML ...
    
			
    2. 
						
  2. 借助curl理解$GLOBALS['HTTP_RAW_POST_DATA'] ,$_POST, php://input
			
    发送请求代码 post.php <?php $url='http://localhost/web/curl/url.php'; $data='a=123|b=2&c=3'; $heade ...
    
			
    3. 
						
  3. ThreadPoolExecutor之四：jdk实现的ScheduledThreadPoolExecutor
			
    一.定时任务调度方式常见的有: 1.cron是一个linux下的定时执行工具,一些重要的任务的定时执行可以通过cron来实现,例如每天凌晨1点备份数据等. 2.在JAVA WEB开发中,我们也经常需要 ...
    
			
    4. 
						
  4. AngularJS：简介
			
    ylbtech-AngularJS:简介 1.返回顶部 1. AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HT ...
    
			
    5. 
						
  5. CentOS yum 安装RabbitMQ
			
    最近在做机器学习的任务系统,任务模块使用了消息对联,比较快速的搭建方法: 1.安装erlang 下载rpm仓库:wget http://packages.erlang-solutions.com/er ...
    
			
    6. 
						
  6. activemq artemis安装运行及其在springboot中的使用
			
    安装 创建broker 在springboot中的使用 依赖 配置 Producer Consumer Rest使用 安装 http://activemq.apache.org/artemis/dow ...
    
			
    7. 
						
  7. Python 正则表达式之选择
			
    In [4]: import re In [5]: re.findall(r"\d+","jjj1234mm222")Out[5]: ['1234', '222 ...
    
			
    8. 
						
  8. java事件监听机制2
			
    今天早上的两点收获: 1.addActionListener(其中的setActionCommand函数就是要对对象进行唯一性的标记,便于消息传来后进行处理.理论上actionlistener可以全部 ...
    
			
    9. 
						
  9. Java微信公众平台开发【番外篇】(七)--公众平台测试帐号的申请
			
    转自:http://www.cuiyongzhi.com/post/45.html 前面几篇一直都在写一些比较基础接口的使用,在这个过程中一直使用的都是我个人微博认证的一个个人账号,原本准备这篇是写[ ...
    
			
    10. 
						
  10. 3.使用Maven构建Web项目
			
    转自:https://blog.csdn.net/m261030956/article/details/46481837 从网上查了一些资料,才算明白(也就是怎么操作吧),怎么使用Maven构建一个W ...
    
			
    11.