CSS3教程

当前位置: HTML5技术网 > CSS3教程 > Pure CSS3 Create Pagination

Pure CSS3 Create Pagination

CSS3教程  手机阅读
       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


【Pure CSS3 Create Pagination】相关文章

1. Pure CSS3 Create Luminous Button

2. Pure CSS3 Create Pagination

3. Telefónica与Mozilla开拓基于HTML5互联网设备

4. Pure CSS3 3D Buttons

5. Pure CSS3 Search Form

6. Pure CSS3 Accordion Slider

7. Pure CSS3 Circle Menu

8. Magí

9. 一个简单的CSS3文字动画插件textillate

10. 使用 CSS3 实现动感迷人的输入框 – Fancy Input

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

点击展开全部
上一篇:用CSS3绘制新浪微博logo 下一篇:CSS3制作价格标牌

﹝Pure CSS3 Create Pagination﹞相关内容

「Pure CSS3 Create Pagination」相关专题

pagination css
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢