css分页实例讲解,CSS 分页实例
本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。
简单分页
如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。
以下实例演示了如何使用 HTML 和 CSS 来创建分页:
CSS 实例
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;
}
点击及鼠标悬停分页样式
如果点击当前页,可以使用 .active 来设置当期页样式,鼠标悬停可以使用 :hover
选择器来修改样式:
CSS 实例
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
CSS 实例
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
圆角样式
可以使用 border-radius 属性为选中的页码来添加圆角样式:
CSS 实例
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
鼠标悬停过渡效果
我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:
CSS 实例
ul.pagination li a {
transition: background-color .3s;
}
带边框分页
我们可以使用 border 属性来添加带边框分页:
CSS 实例
ul.pagination li a {
border: 1px solid #ddd; /* Gray */
}
圆角边框
提示: 在第一个分页链接和最后一个分页链接添加圆角:
CSS 实例
.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 属性来为每个页码直接添加空格
CSS 实例
ul.pagination li a {
margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}
分页字体大小
我们可以使用 font-size 属性来设置分页的字体大小:
CSS 实例
ul.pagination li a {
font-size: 22px;
}
居中分页
如果要让分页居中,可以在容器元素上 (如
) 添加 text-align:center 样式:
CSS 实例
div.center {
text-align: center;
}
更多实例
CSS 实例
面包屑导航
CSS 实例
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: "/ 0a0";
}
css分页实例讲解,CSS 分页实例相关推荐
- oracle tfa 自启动,oracle TFA 升级实例讲解,tfa实例讲解
oracle TFA 升级实例讲解,tfa实例讲解 此操作也可用于安装 [root@rac1 oracle]# cd /opt/oracle.tfa/ [root@rac1 oracle.tfa]# ...
- html中的相对和绝对定位,实例讲解CSS中相对定位和绝对定位的用法和区别
一.相对定位 相对定位是指,该元素相对自己原来位置,偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位.它相对的是它自己. 举例:大div里面包含5个小 ...
- spring aop实例讲解_小实例理解Spring中的AOP----面向切面编程
关于面向切面编程(Spring AOP),是在java面试中经常提及的,只有在充分理解了,日常工作中才能得心应手. 如何理解AOP呢?首先我们要思考为什么要使用切面编程,如下图: 对于一个系统来说保存 ...
- mysql自定义函数的分号_MySQL之自定义函数实例讲解
转自:https://www.2cto.com/database/201804/740205.html MySQL中已经有很多函数,如时间函数等,但是有时这些函数不能满足自己的设计需求,此时需要自定义 ...
- 简述站控系统服务器启停操作,“DCS系统组态”是什么意思?实例讲解其步骤方法...
原标题:"DCS系统组态"是什么意思?实例讲解其步骤方法 "DCS系统组态"是什么意思? DCS组态通俗来讲就是就是控制回路程序. 控制回路通常是针对模拟量的控 ...
- html轮播台袋效果,使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面 轮播图效果 < > css页面 carousel.css #main{ width: 655px; height: 361px; position: relative; } ...
- 制作html表白页面,HTML+CSS入门 表白页面实例讲解
本篇教程介绍了HTML+CSS入门 表白页面实例讲解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 目录文件结构: index.html + jquery\jquery-1 ...
- php mysql实现办公留言系统_传智播客html css php+mysql实现办公留言系统 呱呱网站源代码实例讲解...
php教程 当前位置:主页 > php教程 > 传智播客html css php+mysql实现办公留言系统 呱呱网站源代码实例讲解 传智播客html css php+mysql实现办公留 ...
- css sprite讲解与使用实例
转自:http://www.manongjc.com/article/886.html 一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为"CSS图 ...
最新文章
- 去哪里学习python_Python从哪里开始学?怎么入门?
- 无法初始化java类_myeclip运行java程序不能初始化类 NoClassDefFoundError
- scala与java的区别_Scala学习笔记及与Java不同之处总结
- ddd 企业应用架构模式_灵魂拷问:用了DDD分包就是落地了领域驱动设计吗?谈谈DDD本质...
- JAVA的项目文件夹_Java中Project项目文件夹的绝对路径
- extjs源码分析-Ext.util.TaskRunner(模拟多线程)
- shell命令wc,md5sum,basename
- 图相处理自学(一):数字图像基本概念
- [转载]敏捷开发,你真的做对了吗?
- 文字处理技术:布局的核心是行布局,难点是换行算法
- INVEST模型生境质量评价之威胁源数据处理
- 微信的那个老外产品经理,又写了一篇《中国移动应用设计趋势》
- 【win10】设置电脑固定IP,解除固定IP
- java oio与bio_OIO在java中意味着什么?
- 交换机与路由器的基本工作原理
- 石墨笔记,为知笔记和Effie哪个更适合采编?
- Unity --- 摄像机的选择与设置
- 电脑生成siri语音_给电脑里装个Siri!海尔智能语音系统体验
- 华为服务器如何配置管理IP
- 买二手房(存量房)注意点