【整理】CSS3知识点4-分页

最新推荐文章于 2024-06-03 18:38:21 发布
最新推荐文章于 2024-06-03 18:38:21 发布
阅读量646 收藏 1
点赞数
分类专栏： web前端 文章标签： css3
本博客所有公开的原创博文皆允许转载，无须再征求作者本人（也就是我）同意
本文链接：https://blog.csdn.net/for_cxc/article/details/51544839
版权
分页样式 http://www.runoob.com/css3/css3-pagination.html


1、=======================================================CSS 分页实例
简单分页
如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。
以下实例演示了如何使用 HTML 和 CSS 来创建分页：


<!DOCTYPE html>
<html>
<head>
<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 选择器来修改样式


<!DOCTYPE html>
<html>
<head>
<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;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>点击及鼠标悬停分页样式</h2>
<p>移动鼠标的分页的数字上。</p>
<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>


圆角样式


<!DOCTYPE html>
<html>
<head>
<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;
    border-radius: 5px;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</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>


鼠标悬停过渡效果
<!DOCTYPE html>
<html>
<head>
<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;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>鼠标悬停过渡效果</h2>
<p>鼠标移动到分页码上。</p>
<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>


带边框分页
<!DOCTYPE html>
<html>
<head>
<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;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</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>


圆角边框
<!DOCTYPE html>
<html>
<head>
<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;
}
.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;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</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>


分页间隔
<!DOCTYPE html>
<html>
<head>
<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;
    margin: 0 4px;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</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>


分页字体大小
<!DOCTYPE html>
<html>
<head>
<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: 22px;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>分页字体大小</h2>
<p>我们可以使用 font-size 属性来设置分页的字体大小:</p>
<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>


居中分页
如果要让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式：
<!DOCTYPE html>
<html>
<head>
<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;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
div.center {text-align: center;}
</style>
</head>
<body>
<h2>分页居中</h2>
<div class="center">
  <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>
</div>
</body>
</html>
上一页，下一页按钮:
<!DOCTYPE html>
<html>
<head>
<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>


面包屑导航
<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>
<h2>面包屑导航</h2>
<ul class="breadcrumb">
  <li><a href="#">首页 </a></li>
  <li><a href="#">前端 </a></li>
  <li><a href="#">HTML 教程 </a></li>
  <li>HTML 段落</li>
</ul>
</body>
</html>
Rand Tsui
关注
专栏目录
html左侧导航栏点击下拉菜单,CSS中的导航栏和下拉菜单的实现
weixin_36354924的博客
05-30 3163
一、CSS导航栏(1)导航栏的作用熟练使用导航栏，对于网站排版非常重要,使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。(2)垂直导航栏<1>代码如下垂直导航栏主页新闻联系关于垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏body{margin:0;}ul{padding...
jquery+css3打造一款ajax分页插件(自写)
10-25
### 关键知识点： #### 1. Ajax分页技术 Ajax分页技术是指在用户不重新加载整个页面的情况下，通过Ajax调用来更新页面的部分内容，通常是列表或表格数据。这种方式提高了用户体验，因为它减少了页面加载时间，同时...
bootstrap学习笔记——09——路径分页标签和徽章组件
小贺的博客
06-19 229
四个组件功能：路径组件、分页组件、标签组件和徽章组件。 路径组件 路径组件也叫做面包屑导航。 //面包屑导航 &lt;ol class="breadcrumb"&gt; &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&am
css3常用生僻标签
前端小99的博客
07-09 1011
backgroumd-repeat(repeat-x)平铺 background-repeat:no-repeat; 设置不平铺 background-position 属性改变图像在背景中的位置: 简写形式 backgrond:（#ffffff url() no-repeat right top） background-attachment:fixed;固...
css3分页paginationg【各种分页效果】
云上
07-22 953
CSS 分页实例 本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。 简单分页 如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。 以下实例演示了如何使用 HTML 和 CSS 来创建分页： CSS 实例 ul.pagination {     display: inline-block;     padding: 0;  
css3 选择器 简单的分页 css选择器 ul.pagination li a:hover:not(.active) 选择除了类名为 active的项目
liu709127859的专栏
04-24 6088
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;练习 分页&lt;/title&gt;        &lt;link type="text/css" href="css/sty
CSS3中的媒体查询知识点整理
m0_57533638的博客
05-22 1072
媒体查询 文章目录媒体查询概念逻辑运算符：媒体类型 (mediaType)：媒体功能 (mediafeature)：举例单个使用用min-width时，小的在上面，大的在下面用max-width时，大的在上面，小的在下面同时使用 min-width 和 max-width 概念 媒体查询就是针对不同的终端 (PC端、iPad端和移动端)，在使相同的 HTML结构的前提下，利用 CSS 的媒体查询来为不同的终端调用不同的CSS样式，从而在不同的终端中，都能呈现出不同的UI界面效果。 并且在使用媒体查询时，
CSS第八天----2D和3D
最新发布
primebrake的博客
06-03 988
x就是x轴上移动位置，y就是y轴上移动位置，中间用逗号隔开。
HTML5和CSS3强化知识总结
guai_guai_guai的博客
02-04 3288
之前总结定位元素水平垂直居中时，top left均为50%，之后margin-top为-高度的一半，margin-left为-宽度的一半，即可实现，但这一旦改变盒子的宽高，也得改变marign值，故tranform：translate（-50%，-50%）很方便的避免了频繁改动数据的问题。利用阴影进行动画设置，先利用定位将阴影与圆点放置合适位置，用一个盒子将其包含，让阴影水平垂直居中放置在盒子中，此时圆点就会在阴影正中间，利用动画将阴影的宽高调大，之后每个阴影进行延迟即可。
css分页实例讲解,一篇文章带你了解CSS 分页实例
weixin_29353947的博客
08-04 630
生活中分页的效果到处可见，今天教大家详细的分析一下分页效果。如何使用 HTML 和 CSS 来创建分页?如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航一、分页类型1. 简单分页项目ul.pagination {display: inline-block;padding: 0;margin: 0;}ul.pagination li {display: inline;}ul.pagina...
纯CSS3带过渡动画的分页条ui设计特效源码.zip
11-20
在本项目中，重点利用了CSS3的以下知识点： 1. **过渡(Transitions)**：过渡是CSS3中一个强大的特性，允许元素在不同状态之间平滑地改变。通过定义`transition`属性，可以控制某个属性改变时的过渡效果，例如改变...
CSS3实现3D分页导航按钮.zip
11-17
以下是关于这些知识点的详细说明： 1. **CSS3**：CSS3是层叠样式表的最新版本，它扩展了CSS2.1的功能，引入了许多新的选择器、伪类、伪元素以及动画和转换效果。在这个项目中，3D转换是关键。CSS3的`transform`属性...
JS 上传文件之FormData 与Blob 对象
热门推荐
Rand Tsui
03-20 1万+
SA $.domLoad(function () { var formdata = new FormData(); formdata.append("a","ffdfdf"); formdata.append("file1",new Blob(["Hello World!"],{t
常见竖屏设备屏幕宽高比
Rand Tsui
09-12 1万+
平板设备 768 / 1024 = 0.75 834 / 1112 = 0.75 1024 / 1366 =0.7496339677891654465592972181552‬ 正常手机 320 / 568 =0.56338028169014084507042253521127‬ 360 / 640 =0.5625 375 / 667 =0.56221889055472...
【JavaScript】String 转 ArrayBuffer
Rand Tsui
07-21 8378
function String2ArrayBuffer(str, cb) { var b = new Blob([str]); var f = new FileReader(); f.onload = function(e) { cb(e.target.result); } f.rea...
JS 手机端滑动分页插件 SPager 最新版
Rand Tsui
07-28 7393
JS /* SPager 调用说明 */ //第一步 建立 SPager对象 var spager = new SPager(4); 参数为 每页 item 个数 PageSize //第二步 必须重写 SPager 的 ReturnParentElement 方法 ，返回 item 的父元素 //第三步 必须重写 SPager 的 ReturnGifUrl 方法 ，返回 加载动画gif图片
【整理】html5知识点3
Rand Tsui
05-31 6953
1、====================================================================HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。 本章全面介绍这些新的输入类型： color date datetime datetime-local email month n
ASP.NET分页样式与CSS设计
总结来说，`.net分页`涉及的主要知识点包括： 1. ASP.NET分页控件的使用，如WebDiyer's AspNetPager控件。 2. 控件属性的配置，如`CustomInfoHTML`、`FirstPageText`等，以及事件处理，如`OnPageChanged`。 3. CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值