转载

11款适合移动设备使用CSS3分页导航条

这是11款适合移动设备使用 CSS3 分页导航条插件。你可以通过CSS或SASS文件很容易的重新定制分页导航的样式。分页导航条的作用是用户通过分页链接来浏览你的全部内容。一个可替代的方法是使用瀑布流布局，它们各有长处和短处。

11款适合移动设备使用CSS3分页导航条

查看演示

11款适合移动设备使用CSS3分页导航条.zip

HTML结构

所有的分页导航条DEMO的html结构都是一样的：使用一个<nav>元素来包裹一个无序列表。列表项中的.button是前一页和后一页按钮。


  1. <nav role="navigation">
  2.     <ul class="cd-pagination no-space">
  3.         <li class="button"><a href="#0">Prev</a></li>
  4.         <li><a href="#0">1</a></li>
  5.         <li><a href="#0">2</a></li>
  6.         <li><a class="current" href="#0">3</a></li>
  7.         <li><a href="#0">4</a></li>
  8.         <li><span>...</span></li>
  9.         <li><a href="#0">20</a></li>
  10.         <li class="button"><a href="#0">Next</a></li>
  11.     </ul>
  12. </nav> <!-- cd-pagination-wrapper -->
复制代码

CSS样式

最容易的改变分页导航条主题的方法是通过SASS。插件中提供了SASS文件( _variables.scss)，你可以通过变量来修改它们：

  1. // colors
  2.   
  3. $color-1: #2E4057; // Pickled Bluewood
  4. $color-2: #64a281; // Aqua Forest
  5. $color-3: #ffffff; // White
  6.   
  7. // fonts
  8.   
  9. $primary-font: 'PT Sans', sans-serif;
  10.   
  11. // border-radius
  12.   
  13. $border-radius: .25em;
复制代码

通过修改颜色变量你可以制作出很多不同效果的分页导航条。如果你不喜欢SASS，你可以通过style.css文件来修改它们。

在例子中有一组（可选的）class可以用来改变分页导航条的样式。这些class都被应用到<ul>元素上。 .cd-pagination类是基本的样式，你不可以移除它。

最简单的查看这些分页导航条class的样式的方法是看我们提供的demo，共有11种效果，下面是 .custom-icons 的例子：

  1. /* --------------------------------
  2.   
  3. custom icons - customize the small arrow inside the next and prev buttons
  4.   
  5. -------------------------------- */
  6.   
  7. .cd-pagination.custom-icons .button a {
  8.   position: relative;
  9. }
  10. .cd-pagination.custom-icons .button:first-of-type a {
  11.   padding-left: 2.4em;
  12. }
  13. .cd-pagination.custom-icons .button:last-of-type a {
  14.   padding-right: 2.4em;
  15. }
  16. .cd-pagination.custom-icons .button:first-of-type a::before,
  17. .cd-pagination.custom-icons .button:last-of-type a::after {
  18.   content: '';
  19.   position: absolute;
  20.   display: inline-block;
  21.   /* set size for custom icons */
  22.   width: 16px;
  23.   height: 16px;
  24.   top: 50%;
  25.   /* set margin-top = icon height/2 */
  26.   margin-top: -8px;
  27.   background: transparent url("../img/cd-icon-arrow-1.svg") no-repeat center center;
  28. }
  29. .cd-pagination.custom-icons .button:first-of-type a::before {
  30.   left: .8em;
  31. }
  32. .cd-pagination.custom-icons .button:last-of-type a::after {
  33.   right: .8em;
  34.   transform: rotate(180deg);
  35. }
复制代码
一些提示和建议
  • 在小屏幕的移动设备上，我们移除了numbers类，只为分页导航提供“前一页”和“后一页”。
  • 可以在分页导航的<a>元素上使用class .disabled来禁用某个链接。
  • class .current 用于高亮当前分页导航的number链接。
  • 只有在和 .custom-icons 结合使用时， .animated-buttons 才起作用。另外，<a> 元素中的文字必须用<i> 元素来包裹。

关于如何移除INLINE-BLOCK元素之间的空白的问题

这里是一个小技巧。当你把列表元素设置为inline-block时，由于需要水平对齐它们，你会想到给它们一个margin值。这里给出几个你可以选择的方案：

  • 为列表项设置一个负的margin值。
  • 让所有的列表项都浮动起来（例如：float:left;）。但要记住为<ul>元素或它们父元素使用clearfix hack。
  • 去除掉每一个列表项的关闭标签 </li> 。这个方法看起来不可思议，但却是一个十分好的解决方案。你可以参考DEMO4的分页导航条。
  1. <nav role="navigation">
  2.     <ul class="cd-pagination no-space move-buttons custom-icons">
  3.         <li class="button"><a href="#0">Prev</a>
  4.         <li><a href="#0">1</a>
  5.         <li><a href="#0">2</a>
  6.         <li><a class="current" href="#0">3</a>
  7.         <li><a href="#0">4</a>
  8.         <li><span>...</span>
  9.         <li><a href="#0">20</a>
  10.         <li class="button"><a href="#0">Next</a>
  11.     </ul>
  12. </nav> <!-- cd-pagination-wrapper -->
复制代码

via: http://www.htmleaf.com/css3/daohangcaidan/201501241268.html

正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
Java入门教程 bootstrap3 CSS springboot-demo Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 Struts2教程 MongoDB教程 Redis教程 Spring教程 Git教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 SpringCloud ANTLR教程 Hive教程 java实例教程 Ant教程 Hazelcast教程 Elastic-Job-Lite XStream教程 深入浅出MyBatis SVN教程 ibaties教程 rabittmq教程 WebService CXF学习 Hadoop教程 solr教程 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 Linux入门视频教程
近期评论
  1. 1 Spring Boot集成Swagge快速入门Demo
  2. 2 Spring Boot集成sitemapgen4j实现网站地图生成
  3. 3 Spring Boot集成oauth2快速入门demo
  4. 4 Spring Boot集成Spring AI实现快速接入openAI
  5. 5 Spring Boot集成Spring Session快速入门Demo
  6. 6 Spring Boot集成RabbitMQ快速入门Demo
  7. 7 Spring Boot集成Quartz快速入门Demo
  8. 8 Spring Boot集成Mybatis Plus快速入门Demo
  9. 9 Spring Boot集成zipkin快速入门Demo
  10. 10 能用365块大洋去解决的事，千万不要用时间
网站信息
  • 文章总数：155,471 篇
  • 文件总数：468,751 个
  • 标签总数：2,271 个
  • 分类总数：90 个
  • 留言数量：2,542 条
  • 在线人数：643 人
  • 运行天数：4,199天
  • 最后更新：2024年04月26日20点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG