藤藤每日一练——Pure CSS3 Create Pagination

作者：藤藤 日期：2012-12-10 点击：424
藤藤每日一练
pagination
藤藤每日一练——Pure CSS3 Create Pagination

Pagination（分页导航）效果，可以说每个网站都会有的效果，制作原理简单，今天我们也用css3制作了一个分页导航的效果，整个效果使用的CSS3属性很少，主要使用gradient来制作了渐变图片，使用border-radius来制作了圆角，不过藤藤在这个案例中为了模仿“active”效果，使用了“:target”属性来做的，实际生产中建议这么使用，因为active可以通过程序来控制，不是我们CSS的菜。详细的看代码吧，希望大家喜欢。

demodownload

HTML Code

<ul class="pager">
  <li id="first"><a href="#first">« First</a></li>
  <li id="page_up"><a href="#page_up">«</a></li>
  <li id="one"><a href="#one">1</a></li>
  <li id="two"><a href="#two">2</a></li>
  <li id="three"><a href="#three">3</a></li>
  <li id="four"><a href="#four">4</a></li>
  <li id="five"><a href="#five">5</a></li>
  <li id="six"><a href="#six">6</a></li>
  <li id="seven"><a href="#seven">7</a></li>
  <li id="next_page"><a href="#next_page">»</a></li>
  <li id="last"><a href="#last">Last »</a></li>
</ul>

CSS Code

body {
  background-color: #262626;
}
.demo {
  width: 400px;
    margin: 40px auto 0;
}
.pager li {
  display: inline-block;
  line-height: 25px;
}
.pager a {
  display: block;
  color: #f2f2f2;
  text-shadow: 1px 0 0 #101011;
  padding: 0 10px;
  border-radius: 2px;
  box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
  background: linear-gradient(top,#434345,#2f3032);
}
.pager a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
  background: linear-gradient(top,#f48b03,#c87100);
}
.pager li:target a {
  box-shadow: 1px 0 5px #1a1a1b inset,1px 0 0 #2d2d2d,0 1px 0 #2d2d2d;
  background: linear-gradient(top,#252627,#1c1c1e);
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/pure-css3-create-pagination.html

返回顶部