首页 > 其他分享 >【整理】CSS3知识点4-分页

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

时间：2023-04-30 20:01:54浏览次数：32  
标签：CSS3 知识点 pagination 分页 color li padding ul background


分页样式 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>

标签：CSS3,知识点,pagination,分页,color,li,padding,ul,background
From： https://blog.51cto.com/u_13128132/6238107

相关文章

  • Django4全栈进阶之路23 项目实战（报修类型表）：应用程序命名空间app_name和分页组件pagina
    1、应用程序命名空间app_namefromdjango.urlsimportpathfrom.importviewsfrom.viewsimportRepairDetailViewapp_name='repair'urlpatterns=[path('repair_types/',views.RepairTypeListView.as_view(),name='repair_type_list�......
  • 线程池易忘知识点
    What主要用于整理线程中容易忘记的点以及不太好理解的内容shutdownvsshutdownNow两者都是用于关闭线程池，但是也有着很大区别shutdown方法行为会使得线程池的状态变成SHUTDOWN，线程池不再接收新来的任务。中断空闲的线程(从阻塞队列拿不到任务被阻塞)，正在执行任务的线程不......
  • PHP重要知识点
    PHP表单和用户输入PHP中的$_POST和$_GET变量用于检索表单中的信息，比如用户输入。实例：<html><head><metacharset="utf-8"><title>test</title></head><body><formaction="welcome.php"me......
  • css3效果真Nb,可惜的ie
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content=&quo......
  • CSS知识点总结
    CSS知识点总结文章内容可能较多且杂乱，可以查看页面右方的目录，以及使用Ctrl+F搜索页面内容进行内容定位。常用属性推荐搭配文档使用，可以复制属性名，到文档查看该属性对应的可选值。......
  • 《牛津英语》七年级易错知识点汇总.
    《牛津英语》七年级易错知识点汇总.  单词拼写短语搭配句型语法U6pleasantconvenientswim-swam-swumexcitingoppositefinancialbalconykindergartenpleasant-plea-sure-pleased tellsb.aboutsth.onthemapoftakeabustotake......
  • 电容知识点小结
    1、钽电容过滤纹波效果非常好，但是钽电容容易爆，质量不好，过压、接反均会导致其爆掉。爆的过程有明火，在爆炸火灾等级要求高的场合尽量不适用钽电容。应注意固体钽电容在高阻电路中瞬时击穿可自愈，使用时回路中应串联电阻器，阻值按照3欧姆每福特为宜。2、铝电解电容，一般最高电压就做......
  • AVR单片机知识点
    1、 AVR单片机采用RISC架构，8051单片机采用CISC架构。前者速度为后者的2~4倍，为流水线操作指令2、 AVR单片机有32个通用寄存器(地址在RAM区从$0000开始到$001F)，其中有6个(最后6个)合并为3个16位的X,Y,Z寄存器，用来存放地址指针，Z寄存器还可以寻址程序存储器3、 哈佛结构，131条......
  • layui学习5（日期与时间选择、分页）
    1.日期与时间选择1.1<divclass="layui-inline"><!--注意：这一层元素并不是必须的--><inputtype="text"class="layui-input"id="test1"placeholder="默认选择题"></div><divclass=&qu......
  • 题解（开始学知识点
    D.FrogTraveler1900dpgq！https://codeforces.com/contest/1602/problem/D题解：我们可以通过类似bfs的过程找到每个点的能到达的所需步数最小的点，完成更新，但每个点能被哪些点到达很难判断，故我们反过来考虑，如果我们能得到从n->0的最短跳跃次数，亦得解，而每个点下一步能到达的点容......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99