Pure CSS3 Create Pagination


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


       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);
}



演示:http://www.w3cplus.com/demo/css3/pagination/index.html
下载:pagination.zip


标签: CSS