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

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

藤藤每日一练——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

Nike MagistaX Proximo II TF white Fluorescent yellow women football shoes

如需转载,烦请注明出处:https://www.w3cplus.com/demo/557.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部