CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3制作的分页导航

CSS3制作的分页导航

       今天我们主要的目的是使用CSS3等相关属性来制作分页导航效果,大家可以直击下面的效果图:


       在这个效果中,其实只有两大看点:

  • 使用CSS3的属性,制作不规则图形效果,并且hover状态下会慢慢改变图形和字体颜色;


  • 让列表水平居中,这个效果我曾多次碰到同学问怎么使用一个列表居中显示,并且排在一行,列表还要自适应内容的宽度。看起来复杂,其实不难,这也是我下面要重点介绍的一个小技巧。


       HTML Markup

       有想做东西,我们就需要有材料,我这里所说的材料就是我们分页导航的HTML Markup,下面我们一起来看看吧:

  1. <ul class="pager">
  2. <li class="pager-first first">
  3. <a class="active" title="到第一页" href="/css3">« 首页</a>
  4. </li>
  5. <li class="pager-previous">
  6. <a class="active" title="返回上一个页面" href="/css3?page=2">‹ 上一页</a>
  7. </li> <li class="pager-item">
  8. <a class="active" title="到第 1 页" href="/css3">1</a>
  9. </li>
  10. <li class="pager-item">
  11. <a class="active" title="到第 2 页" href="/css3?page=1">2</a>
  12. </li>
  13. <li class="pager-item">
  14. <a class="active" title="到第 3 页" href="/css3?page=2">3</a>
  15. </li>
复制代码

       这样的结构是我常用来制作分页导航的结构,当然大家还有其他的不同结构,今天我们就不去探讨这方面的问题。其实这个结构很简单,我们把每一页的序号放在了一个“<a>”中,然后对应放在列表项中。唯一需要注意的一点就是“当前页”,因为所处当前页是不需要有具有点击效果,所以我直接将当前页放在一个“li”中,并且命名一个“pager-current”的类名给他,大家可以从Firebug的截图中来看这样的区别:


       CSS Code

       有了结构,就需要用CSS来美化他:

  1. body {
  2. font:12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
  3. }
  4. .pager {
  5. list-style: none outside none;
  6. margin: 20px;
  7. padding: 0;
  8. text-align: center;
  9. }

  10. .pager li {
  11. display: inline-block;
  12. margin: 0;
  13. padding: 0;
  14. }
  15. * html .pager li { display: inline; }  
  16. *+html .pager li { display: inline; }  

  17. .pager li.pager-current,
  18. .pager li a {
  19. -moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
  20. -webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
  21. border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
  22. background: #232B30;
  23. /* old browsers */
  24. background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%);
  25. /* firefox */
  26. background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30));
  27. /* webkit */
  28. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 );
  29. /* ie */
  30. -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  31. /* Firefox */
  32. -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  33. /* CSS3 */         

  34. color: #FFFFFF; font-size: 12px;
  35. margin-left: 10px;
  36. padding: 3px 12px;
  37. -webkit-transition: all 0.5s ease-in 0s;
  38. -moz-transition: all 0.5s ease-in 0s;
  39. -o-transition: all 0.5s ease-in 0s;
  40. transition: all 0.5s ease-in 0s;
  41. text-decoration: none;
  42. zoom:1;
  43. }  

  44. .pager li.pager-current {
  45. -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  46. -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  47. border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  48. color: #d54e21;
  49. font-weight: bold;
  50. }  

  51. .pager li a:hover {
  52. -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  53. -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  54. border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  55. background: #4C5A64;
  56. /* old browsers */
  57. background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%);
  58. /* firefox */
  59. background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940));
  60. /* webkit */
  61. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 );
  62. /* ie */
  63. color: #d54e21;
  64. }
复制代码

       上面是DEMO效果所使用的CSS代码,下面我们一起来细看一下上面的代码:

       1、不规则图形

       我在此处主要使用CSS3的border-readius属性制作的不规则圆角效果:

  1. .pager li a
  2. -moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
  3. -webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
  4. border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
  5. }
复制代码

       上面是默认状态下的效果,那么在hover下改变图形样式,我想大家都想到了,是的那就是在“:hover”下改变其风格:

  1. .pager li a:hover {
  2. -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  3. -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  4. border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  5. }       
复制代码

       2、背景色

       通过第一步,我们只制作出来不规则的边界效果,需要在上面的基础上加上背景色,这样填充进行就形成了不规则的图形,类似于图片效果。这里填充颜色,使用的是CSS3的渐变属性——Gradient来实现的:

  1. .pager li a {
  2. background: #232B30; /* old browsers */
  3. background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
  4. background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
  5. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */  
  6. }
  7. .pager li a:hover {
  8. background: #4C5A64; /* old browsers */
  9. background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
  10. background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
  11. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
  12. color: #d54e21;
  13. }
复制代码

       3、动画效果

       上面完成的只是一个静态的CSS3样式效果,但我们上面的DEMO中是有一个动态改变背景的效果,这个效果我主要使用了CSS3的transition属性:

  1. .pager li a {
  2. -webkit-transition: all 0.5s ease-in 0s;
  3. -moz-transition: all 0.5s ease-in 0s;
  4. -o-transition: all 0.5s ease-in 0s;
  5. transition: all 0.5s ease-in 0s;
  6. }
复制代码

       请注意,我们的效果是在“a:hover”状态下发生的,所以大家会以为动画效果是加载在“a:hover”上,其实不是的,我需要在“a”上设置一个“transition”属性,当在“a:hover”状态下,元素样式参数值改变时,就会给我们带一个动画效果一样。

       4、当前项效果

       因为我们当前项是没有放在“a”标签中的,为了让其和其他项样式一样,我们需要把当前项的样式和“a”链接的样式设置成一样,不同之处是,他的效果类似于“a:hover”效果:

  1. .pager li.pager-current,
  2. .pager li a {
  3. -moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
  4. -webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
  5. border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
  6. background: #232B30; /* old browsers */
  7. background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
  8. background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
  9. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
  10. -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
  11. -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */  
  12. box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */         
  13. color: #FFFFFF;
  14. font-size: 12px;
  15. margin-left: 10px;
  16. padding: 3px 12px;
  17. -webkit-transition: all 0.5s ease-in 0s;
  18. -moz-transition: all 0.5s ease-in 0s;
  19. -o-transition: all 0.5s ease-in 0s;
  20. transition: all 0.5s ease-in 0s;
  21. text-decoration: none;
  22. zoom:1;
  23. }  

  24. .pager li.pager-current {
  25. -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  26. -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  27. border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
  28. color: #d54e21;
  29. font-weight: bold;
  30. }
复制代码

       5、列表居中

       这一点是我今天要特别提出来的一点,大家都知道,我们列表项要放置在一行显示,需要使用“float”来实现,但是使用了浮动后,我们就无法让整个分页导航水平居中,如此一来就会给我们带来一个两难境地。那么今天我在这里给大家展示另外一种处理方法:“display:inline-block”来让列表项显示在一行,大爱看到这个肯定又说难了,因为其在IE6-7下是无法支持的。这一点大家说的一点不错,其实我们只需要在IE下稍作处理就OK了,我们具体来看一下如何实现其水平居中:

  1. .pager {
  2. text-align: center;/*====让列表项内容居中放====*/
  3. padding: 0;
  4. margin: 20px;
  5. list-style: none outside none;
  6. }
  7. .pager li {
  8. display: inline-block;/*===改变列表项显示方式为行内块===*/
  9. margin: 0;
  10. padding: 0;
  11. }
复制代码

       起到列表水平居中的效果,我们靠的就是上面的两句代码“text-align: center”和“display: inline-block”,但大家写的时候一定不能放借位置哟,前一句是放在“ul”中,后一句是放在“li”中,我们来看看效果:


       从上图中我们很明显的看到了,IE6-7下是无法排在一行中显示的,那么我们现在来看如何处理他们的兼容问题。我们使用Hack来,让IE6-7下按另外一种方法显示:

  1. * html .pager li { display: inline; }  
  2. *+html .pager li { display: inline; }   

  3. .pager li a {  
  4. zoom: 1;  
  5. }
复制代码

       现在我们在来看一下,加上以上代码后的效果:


       现在在所有浏览器下都能水平居中了。只是部分浏览器不支持CSS3的属性,这些我们无需理会他了。最后为了让其更美丽一点,我在这里还使用了css3的其他属性,比如说text-shadow、box-shadow等等。
那么一个分页效果就做好了,感兴趣的话你也可以动手一试。大家一起来看一下最终效果吧:




【CSS3制作的分页导航】相关文章

1. CSS3制作的分页导航

2. 用绳子原理制作的一款简单的html5小游戏

3. 20个使用Bootstrap前端框架制作的漂亮网站

4. 利用CSS3制作动画效果

5. 用css3制作纸张效果

6. 利用CSS3制作动画效果

7. CSS3制作购物车下拉列表

8. CSS3制作Login栏

9. CSS3制作分步注册表单

10. CSS3制作价格标牌

本文来源:https://www.51html5.com/a859.html

点击展开全部

﹝CSS3制作的分页导航﹞相关内容

「CSS3制作的分页导航」相关专题

其它栏目

也许您还喜欢