Pure CSS3 Create Pagination
Pagination(分页导航)效果,可以说每个网站都会有的效果,制作原理简单,今天我们也用css3制作了一个分页导航的效果,整个效果使用的
CSS3属性很少,主要使用gradient来制作了渐变图片,使用border-radius来制作了圆角,不过藤藤在这个案例中为了模仿
“active”效果,使用了“:target”属性来做的,实际生产中建议这么使用,因为active可以通过程序来控制,不是我们CSS的菜。详细的
看代码吧,希望大家喜欢。
HTML CODE
CSS CODE
演示:http://www.w3cplus.com/demo/css3/pagination/index.html
下载:pagination.zip
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互联网设备
8. Magí
10. 使用 CSS3 实现动感迷人的输入框 – Fancy Input
本文来源:https://www.51html5.com/a898.html
上一篇:用CSS3绘制新浪微博logo
下一篇:CSS3制作价格标牌
﹝Pure CSS3 Create Pagination﹞相关内容
- Your First Step
- ECMAScript 6 Features 中文版
- CSS3动画效果-animate.css
- Dcode-it Crosscode Puzzles
- Fred Jones in Adventureland
- Fred Jones in Adventureland
- Chrome18引入GPU加速 支持SVG与CSS
- cssSandpaper-兼容IE的CSS3 JavaScript库
- 使用 JavaScript 修改浏览器 URL 地址栏
- CSS FILTERS:CSS过滤器能够做什么?