CSS 分页实例
CSS 分页实例
一、简单分页
如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。
以下实例演示了如何使用 HTML 和 CSS 来创建分页:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
} ul.pagination li {display: inline;} ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body> <h2>简单的分页</h2>
<ul class="pagination">
<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>
效果:
二、点击及鼠标悬停分页样式
如果点击当前页,可以使用 .active
来设置当期页样式,鼠标悬停可以使用 :hover
选择器来修改样式:
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
} ul.pagination li a:hover:not(.active) {background-color: #ddd;}
圆角样式:
可以使用 border-radius
属性为选中的页码来添加圆角样式:
ul.pagination li a {
border-radius: 5px;
} ul.pagination li a.active {
border-radius: 5px;
}
三、鼠标悬停过渡效果
我们可以通过添加 transition
属性来为鼠标移动到页码上时添加过渡效果:
ul.pagination li a {
transition: background-color .3s;
}
四、带边框分页
我们可以使用 border
属性来添加带边框分页:
ul.pagination li a {
border: 1px solid #ddd; /* Gray */
}
圆角边框:
提示: 在第一个分页链接和最后一个分页链接添加圆角:
.pagination li:first-child a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
} .pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
分页间隔:
提示: 你可以使用 margin
属性来为每个页码直接添加空格:
ul.pagination li a {
margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}
五、分页字体大小
我们可以使用 font-size
属性来设置分页的字体大小:
ul.pagination li a {
font-size: 22px;
}
六、居中分页
如果要让分页居中,可以在容器元素上 (如 <div>) 添加 text-align:center 样式:
div.center {
text-align: center;
}
七、面包屑导航
另外一种导航为面包屑导航,实例如下:
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ul.breadcrumb li a {color: green;}
十、示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
} ul.pagination li {display: inline;} ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
font-size: 18px;
} ul.pagination li a.active {
background-color: #eee;
color: black;
border: 1px solid #ddd;
} ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body> <p>上一页,下一页按钮:</p>
<ul class="pagination">
<li><a href="#">❮</a></li>
<li><a href="#">❯</a></li>
</ul> <p>分页导航:</p>
<ul class="pagination">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> </body>
</html>
效果:
CSS 分页实例的更多相关文章
- css总结14:CSS 分页实例
1 作用:如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 例1 :以下实例演示了如何使用 HTML 和 CSS 来创建分页: 正常样式 <!DOCTYPE html>< ...
- php分页实例附代码
一个典型的PHP分页实例代码分享,学习php的朋友肯定用得到,主要是了解思路: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- java:(json,ajax,path,Oracle的分页实例,Filter拦截器)
1.json: <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...
- RDIFramework.NET 中多表关联查询分页实例
RDIFramework.NET 中多表关联查询分页实例 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用户和开发者最佳的.Net框架部署方案.该框架以SOA范式作为 ...
- Jsp分页实例---真分页
网页的分页功能的实现比较简单,实现方法也多种多样. 今天总结一个简单的Jsp真分页实例. 首先,提到分页就要先明确一个概念,何为真分页何谓假分页. 假分页:一次性从数据库读出表的所有数据一次性的返回给 ...
- Struts+jdbc+分页 实例
根据项目里分页实例,带有注解. package org.tarena.netctoss.dao.impl; import java.sql.Connection; import java.sql.Pr ...
- CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
- js分页实例
js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...
- css sprite实例
css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...
随机推荐
- sql查询数据库中所有表名
查询数据库里所有表名和字段名的语句SQL 查询所有表名:SELECT NAME FROM SYSOBJECTS WHERE TYPE='U'SELECT * FROM INFORMATION_SCHE ...
- 谈一谈php://input和php://output
对一php://input介绍,PHP官方手册文档有一段话对它进行了很明确地概述. php://input 是个可以访问请求的原始数据的只读流. POST 请求的情况下,最好使用 php://inpu ...
- jquery单选框radio绑定click事件实现和是否选中的方法
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...
- 非旋转Treap
Treap是一种平衡二叉树,同时也是一个堆.它既具有二叉查找树的性质,也具有堆的性质.在对数据的查找.插入.删除.求第k大等操作上具有期望O(log2n)的复杂度. Treap可以通过节点的旋 ...
- 【LNMP】基于阿里云的https免费证书配置
1 登录阿里云账户,左侧菜单选择 -> 2 右上角选择购买证书,选择免费型 3 按照流程购买,回到订单列表.填写认证信息,选择DNS解析, 在列表 选择下载证书 4 我的服务器是ng ...
- 硝烟中的Scrum和XP-我们如何实施Scrum 12)发布计划 13)组合XP
12 怎样制定发布计划, 处理固定价格的合同 一次只计划一个sprint的事情会显得提前量不足, 提前做计划是个好习惯; 尤其是签了固定价格的合同之后, 不得不预先计划好, 防止无法按期交付的危险情况 ...
- 【CSS系列】布局篇
一.让设计居中 1.使用自动空白边让设计居中 <style type="text/css"> body{ text-align:center; min-width:76 ...
- 【黑金ZYNQ7000系列原创视频教程】02.视频接口——hdmi编码输出实验
黑金论坛地址: http://www.heijin.org/forum.php?mod=viewthread&tid=36636&extra=page%3D1 爱奇艺地址: http: ...
- 启动Solr时报 _version_ field must exist in schema 错误的解决方法
Solr启动时报 org.apache.solr.common.SolrException:org.apache.solr.common.SolrException: Unable to use up ...
- intellij IDEA 报 非法字符 \65279 原因及解决方法
用eclipse创建的项目导入到 intellij IDEA 之后 编译时包 非法字符 '\65279' 该问题产生的原因是 IDEA对以UTF8编码的文件保存时自动加上了BOM(UTF-8文件签名) ...