码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2017-09-05 09:59:35      阅读：168      评论：0      收藏：0      [点我收藏+]

标签：rate   initial   inline   none   device   center   cin   dem   lis   

纯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


 




 
纯CSS制作自适应分页条-分享------彭记（019）
标签：rate   initial   inline   none   device   center   cin   dem   lis   
原文地址：http://www.cnblogs.com/pgm0908/p/7351694.html

                

                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            

                                登录后才能评论！
                                
                            

                            

                        

                    

                

                
            

        

        

            
            





            
            


    

        

            分享档案

        

            更多>
        

    

    

        
                
                    2021年07月29日
                    (22)

            
                
                    2021年07月28日
                    (40)

            
                
                    2021年07月27日
                    (32)

            
                
                    2021年07月26日
                    (79)

            
                
                    2021年07月23日
                    (29)

            
                
                    2021年07月22日
                    (30)

            
                
                    2021年07月21日
                    (42)

            
                
                    2021年07月20日
                    (16)

            
                
                    2021年07月19日
                    (90)

            
                
                    2021年07月16日
                    (35)

            
    




            


    

        
周排行

        

            mamicode.com排行更多图片

        

            更多

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            兰亭集智  
			国之画  
			百度统计   
			 站长统计  
			阿里云  
			chrome插件  
			新版天听网
        

    





    

        

            关于我们 - 联系我们 - 留言反馈
        

        

            © 2014 mamicode.com
            版权所有   联系我们:gaon5@hotmail.com
        

        

            迷上了代码！