纯CSS制作自适应分页条-分享------彭记（019）

最新推荐文章于 2022-05-31 21:47:07 发布
最新推荐文章于 2022-05-31 21:47:07 发布
阅读量327 收藏
点赞数
文章标签： javascript php xhtml ViewUI
原文链接：http://www.cnblogs.com/pgm0908/p/7351694.html
版权

纯css制作自适应分页条

效果图：

 

html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="css,html" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<title>演示：纯CSS制作自适应分页条</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<div class="container">
    <header>
        <div class="row">
            <div class="col-md-3 col-xs-12"><h1 class="logo"><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
            <div class="col-md-9 text-right"></div>
        </div>
    </header>
    <div class="row main">
        <div class="col-md-12">
            <h2 class="top_title"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span><a href="http://www.helloweba.com/view-blog-420.html">纯CSS制作自适应分页条</a></h2>
            
            <section>
                <h2>- 1 -</h2>
                <nav role="navigation">
                    <ul class="cd-pagination">
                        <li class="button"><a class="disabled" href="#0">上一页</a></li>
                        <li><a class="current" href="#0">1</a></li>
                        <li><a href="#0">2</a></li>
                        <li><a href="#0">3</a></li>
                        <li><a href="#0">4</a></li>
                        <li><span>...</span></li>
                        <li><a href="#0">20</a></li>
                        <li class="button"><a href="#0">下一页</a></li>
                    </ul>
                </nav>
            </section> 

            <section>
                <h2>- 2 -</h2>

                <nav role="navigation">
                    <ul class="cd-pagination no-space">
                        <li class="button"><a href="#0">Prev</a></li>
                        <li><a href="#0">1</a></li>
                        <li><a href="#0">2</a></li>
                        <li><a class="current" href="#0">3</a></li>
                        <li><a href="#0">4</a></li>
                        <li><span>...</span></li>
                        <li><a href="#0">20</a></li>
                        <li class="button"><a href="#0">Next</a></li>
                    </ul>
                </nav> <!-- cd-pagination-wrapper -->
            </section>

            <section>
                <h2>- 3 -</h2>

                <nav role="navigation">
                    <ul class="cd-pagination custom-buttons">
                        <li class="button"><a href="#0">Prev</a></li>
                        <li><a href="#0">1</a></li>
                        <li><a href="#0">2</a></li>
                        <li><a class="current" href="#0">3</a></li>
                        <li><a href="#0">4</a></li>
                        <li><span>...</span></li>
                        <li><a href="#0">20</a></li>
                        <li class="button"><a href="#0">Next</a></li>
                    </ul>
                </nav> <!-- cd-pagination-wrapper -->
            </section>

            <section>
                <h2>- 4 -</h2>

                <nav role="navigation">
                    <ul class="cd-pagination no-space custom-buttons">
                        <li class="button"><a href="#0">Prev</a></li>
                        <li><a href="#0">1</a></li>
                        <li><a href="#0">2</a></li>
                        <li><a class="current" href="#0">3</a></li>
                        <li><a href="#0">4</a></li>
                        <li><span>...</span></li>
                        <li><a href="#0">20</a></li>
                        <li class="button"><a href="#0">Next</a></li>
                    </ul>
                </nav> <!-- cd-pagination-wrapper -->
            </section>

            <section>
                <h2>- 8 -</h2>

                <nav role="navigation">
                    <ul class="cd-pagination custom-buttons">
                        <li class="button"><a href="#0">Prev</a></li>
                        <li class="button"><a href="#0">Next</a></li>
                    </ul>
                </nav> <!-- cd-pagination-wrapper -->
            </section>

            
        </div>
    </div>
    <footer>
        <p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
    </footer>
</div>
    
</body>
</html>

css：

//demo.css
@charset "utf-8";
/* CSS Document */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
a{color:#007bc4/*#424242*/; text-decoration:none;}
a:hover{text-decoration:underline}
a:focus {outline:none; -moz-outline:none;}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
html{background:url(../../images/bg.png)}
body{height:100%; font:14px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C; background: url(../../images/body_bg.gif) repeat-x}
img{border:none}

header{box-sizing: border-box;width: 100%;padding:10px;overflow: hidden;}
.logo{width:240px; height:90px; background:url(../../images/logo_demo.gif) no-repeat;text-indent:-999em;}
.logo a{display:block; width:240px; height:90px}
.main{border:1px solid #d3d3d3; border-radius:5px;background:#fff;}

h2.top_title{margin:4px 10px; padding-top:15px; padding-bottom:10px; border-bottom:1px solid #d3d3d3; font-size:18px; color:#007bc4;font-weight:bold}
.optlist{margin:50px 10px;text-align:center;}
.optlist a{margin:6px;}

footer{height:60px;}
footer p{ padding:10px 2px; line-height:24px; text-align:center}
footer p a:hover{color:#51555C}

.google_ad{width:728px; height:90px; margin:50px auto}
.ad_76090,.ad_demo{width:760px; height:90px; margin:40px auto}
.demo_topad{position:absolute; top:15px; right:0px; width:472px; height:60px;}


@media screen and (min-width: 320px) and (max-width : 480px) {
 html{-webkit-text-size-adjust: none;}
.header{width:100%}
.main{width:100%; margin:10px auto;  -moz-border-radius:0px;-khtml-border-radius: 0px;-webkit-border-radius: 0px; border-radius:0px;}
 .demo_topad{display:none}
 .google_ad{width:100%; margin:40px auto; text-align:center}
.ad_76090,.ad_demo{width:100%; height:auto; margin:40px auto;text-align:center}
.demo{width:98%; margin:10px auto}
}

//style.css
section {
  /* used just to separate paginations */
  border-bottom: 1px solid #e6e6e6;
}
section h2 {
  width: 90%;
  margin: 1em auto 0;
  color: #7d98ba;
  font-weight: 700;
  text-align: center;
}
@media only screen and (min-width: 1170px) {
  section h2 {
    margin: 2em auto 0;
  }
}
/* -------------------------------- 

Basic style

-------------------------------- */

nav[role="navigation"] {
  text-align: center;
}

.cd-pagination {
  width: 90%;
  max-width: 768px;
  margin: 2em auto 2em;
  text-align: center;
}
.cd-pagination li {
  /* hide numbers on small devices */
  display: none;
  margin: 0 .2em;
}
.cd-pagination li.button {
  /* make sure prev next buttons are visible */
  display: inline-block;
}
.cd-pagination a, .cd-pagination span {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* use padding and font-size to change buttons size */
  padding: .6em .8em;
  font-size: 1rem;
}
.cd-pagination a {
  border: 1px solid #e6e6e6;
  border-radius: 0.25em;
}
.no-touch .cd-pagination a:hover {
  background-color: #f2f2f2;
}
.cd-pagination a:active {
  /* click effect */
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
.cd-pagination a.disabled {
  /* button disabled */
  color: rgba(46, 64, 87, 0.4);
  pointer-events: none;
}
.cd-pagination a.disabled::before, .cd-pagination a.disabled::after {
  opacity: .4;
}
.cd-pagination .button:first-of-type a::before {
  content: '\00ab  ';
}
.cd-pagination .button:last-of-type a::after {
  content: ' \00bb';
}
.cd-pagination .current {
  /* selected number */
  background-color: #64a281;
  border-color: #64a281;
  color: #ffffff;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .cd-pagination li {
    display: inline-block;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-pagination {
    margin: 4em auto 8em;
  }
}

/* -------------------------------- 

No space - remove distance between list items

-------------------------------- */
.cd-pagination.no-space {
  width: auto;
  max-width: none;
  display: inline-block;
  border-radius: 0.25em;
  border: 1px solid #e6e6e6;
}
.cd-pagination.no-space::after {
  clear: both;
  content: "";
  display: table;
}
.cd-pagination.no-space li {
  margin: 0;
  float: left;
  border-right: 1px solid #e6e6e6;
}
.cd-pagination.no-space li:last-of-type {
  border-right: none;
}
.cd-pagination.no-space a, .cd-pagination.no-space span {
  float: left;
  border-radius: 0;
  padding: .8em 1em;
  border: none;
}
.cd-pagination.no-space li:first-of-type a {
  border-radius: 0.25em 0 0 0.25em;
}
.cd-pagination.no-space li:last-of-type a {
  border-radius: 0 0.25em 0.25em 0;
}


/* -------------------------------- 

custom buttons - replace prev and next buttons text with a custom icon 

-------------------------------- */
.cd-pagination.custom-buttons a, .cd-pagination.custom-buttons span {
  vertical-align: middle;
}
.cd-pagination.custom-buttons .button a {
  /* set custom width */
  width: 40px;
  /* image replacement */
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  color: transparent;
  background-image: url("../img/cd-icon-arrow.svg");
  background-repeat: no-repeat;
  background-position: center center;
}
.cd-pagination.custom-buttons .button:last-of-type a {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.no-touch .cd-pagination.custom-buttons .button:last-of-type a:active {
  -webkit-transform: scale(0.9) rotate(180deg);
  -moz-transform: scale(0.9) rotate(180deg);
  -ms-transform: scale(0.9) rotate(180deg);
  -o-transform: scale(0.9) rotate(180deg);
  transform: scale(0.9) rotate(180deg);
}
 
  
 
   
//svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<polyline fill="none" stroke="#2E4057" stroke-miterlimit="10" points="11,1 4,8 11,15 "/>
</svg>
 
  
 
  
转载分享：出自http://www.helloweba.com
 
  
 
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/pgm0908/p/7351694.html

                

        

        




    

  


    

      

        

            

              
                
                  weixin_30776545
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
20种css分页样式

				
			

			

				

					03-29
				

			

		

		

			
				
20种css分页样式，还是很漂亮的，很喜欢

			
		

	



                

            
              



	

		

			

				
					
div+css分页条

				
			

			

				

					wilr笔记空间
				

				

					10-23
					
					221
					
				

			

		

		

			
				
分享一个自己写的分页条：
CSS代码如下:
 
.page{margin:68px auto;padding-left:25%;font-size:12px;}
.page ul li{float: left;height: 22px;line-height: 22px;cursor: pointer;list-style:none;}
.page ul li:hover,li.page...

			
		

	



              


  
              

                


	

		

			

				
					
php自适应样式,PHP自适应分页代码，可以灵活定制CSS样式和分页链接效果！

				
			

			

				

					weixin_42468413的博客
				

				

					03-11
					
					200
					
				

			

		

		

			
				
原创！ 无 ?php/** * 可以灵活定制的分页类 * * 可以定制的选项包括，分页链接显示效果，当前页码链接按钮的样式，URL中获取分页值的名字，可以随意带自己的参数 * * 使用方法： * 1、初始化类的时候需要传入参数，类型为数组。 * array( * (必填)'totalRows'原创！'100', 需要显示的数据的总条数；* (必填)'pageSize'=>'2', 每页需要显...

			
		

	





	

		

			

				
					
PHP自适应分页代码，可以灵活定制CSS样式和分页链接效果！

				
			

			

				

					32#星空幻颖
				

				

					04-19
					
					1254
					
				

			

		

		

			
				
<?php
/**
 * 可以灵活定制的分页类
 * 
 * 可以定制的选项包括，分页链接显示效果，当前页码链接按钮的样式，URL中获取分页值的名字，可以随意带自己的参数
 * 
 * 使用方法：
 * 1、初始化类的时候需要传入参数，类型为数组。
 * array(
 * 	(必填)'totalRows'=>'100', 需要显示的数据的总条数；
 * 	(必填)'pageS

			
		

	



		

			
		



	

		

			

				
					
24种页面分页样式(带css)

				
			

			

				

					12-01
				

			

		

		

			
				
很漂亮的一些分页样式,带css和源码,可直接修改使用

			
		

	





	

		

			

				
					
纯CSS制作自适应分页条附源码下载

				
			

			

				

					09-27
				

			

		

		

			
				
本文将介绍如何仅使用CSS来制作一个自适应的分页条，它可以适配多种屏幕尺寸，包括PC端和移动端。这里不使用任何的前端框架，比如Bootstrap，而是通过纯CSS来实现一个既美观又实用的分页组件。有兴趣的朋友可以通过...

			
		

	





	

		

			

				
					
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

				
			

			

				

					10-17
				

			

		

		

			
				
在使用VUE2.0结合ElementUI2.0框架开发过程中，经常会遇到需要让表格控件自适应浏览器窗口高度的需求，同时保持表头固定，并在内容超出时显示滚动条。ElementUI为el-table元素提供了直接设置高度（height）属性的...

			
		

	





	

		

			

				
					
3-9(Tab分页式菜单).7z

				
			

			

				

					01-30
				

			

		

		

			
				
【标题】"3-9(Tab分页式菜单)"指的是一个关于实现Tab分页式菜单的教程或示例代码的压缩文件。这种菜单是用户界面设计中常见的元素，尤其在网页和应用程序中广泛使用，它允许用户通过点击不同的标签来切换不同的页面...

			
		

	





	

		

			

				
					
CSS3等相关属性制作分页导航实现代码

				
			

			

				

					12-13
				

			

		

		

			
				
【CSS3制作分页导航详解】  本教程将详细介绍如何利用CSS3的相关属性，特别是`border-radius`, `transition`, `hover`等，来创建一个类似图片效果的分页导航。目标是模仿W3cplus网站上的分页样式，该样式具有不规则...

			
		

	





	

		

			

				
					
div+css 24种分页样式

				
			

			

				

					07-21
				

			

		

		

			
				
div+css
24种分页样式

可以生意修改

			
		

	





	

		

			

				
					
25种分页css样式

				
			

			

				

					01-06
				

			

		

		

			
				
25种简单的前端分页样式的例子下载，只有前端的样式。

			
		

	





	

		

			

				
					
html+css实现简单分页页码效果

				
			

			

				

					04-19
				

			

		

		

			
				
html+css实现简单分页页码效果源码，尚且没有复杂的后台，给前端新手学习之用

			
		

	





	

		

			

				
					
按高度进行分页代码

				
			

			

				

					09-05
				

			

		

		

			
				
Asp的文章内容太长，按高度进行分页代码！

			
		

	





	

		

			

				
					
自适应宽度且居中的分页

				
			

			

				

					03-29
				

			

		

		

			
				
NULL
博文链接：https://axl234.iteye.com/blog/1292217

			
		

	





	

		

			

				
					
基于html5自适应的微信滑动翻页效果

				
			

			

				

					12-17
				

			

		

		

			
				
在微信中经常看见朋友分享的带有翻页效果的宣传页面，自己研究了下，做了个小的推广页，分享下。html5,能够支持分享时自定义分享图标、路径、文字，向上滑动分页，全屏自适应。

			
		

	





	

		

			

				
					
html分页自适应居中；css设置分页自适应居中

				
			

			

				

					weixin_30432179的博客
				

				

					07-25
					
					218
					
				

			

		

		

			
				
制作网页列表的分页必不可少，显示的列表条数也不一样，让我们一起来看看如何让分页标签根据给定的分页自动居中呢。
对<ul>标签设置样式为：{ display: table margin:40px auto;}
对<li>标签设置样式为：li {display: table-cell; }
这样就可以让分页自动居中了
转载于:https://www.cnblogs....

			
		

	





	

		

			

				
					
css应用实现分页效果

				
			

			

				

					qq_58235030的博客
				

				

					05-31
					
					280
					
				

			

		

		

			
				
css应用实现分页效果

			
		

	





	

		

			

				
					
一个简单的JQuery自适应分页插件twbsPagination

				
			

			

				

					weixin_30873847的博客
				

				

					08-04
					
					249
					
				

			

		

		

			
				
下载地址：http://esimakin.github.io/twbs-pagination/

1 解决totalPages不更新的问题  （先移除然后重新加入DOM树中）在使用twbsPagination之前做。$('#visible-pages-example').remove();$("#pagination_box").append('<ul id="visible-page...

			
		

	





	

		

			

				
					
简单的js分页源码

				
			

			

				

					熊大的博客
				

				

					04-20
					
					977
					
				

			

		

		

			
				
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;  &lt;head&gt;  &lt;

			
		

	





	

		

			

				
					
实现列宽自适应: ko-grid-column-sizing 扩展功能解析

				
			

			

				

					
				

			

		

		

			
				
而 ko-grid 是一个基于 Knockout.js 的数据网格组件，它提供了丰富的功能，如分页、排序、编辑、选择等，用于构建复杂的表格界面。  "ko-grid-column-sizing" 扩展弥补了 ko-grid 在列宽管理方面的不足。在没有此...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值