DIV CSS实例橙蓝互换的CSS翻页效果
文章来源:中国站长网 文章作者:佚名 日期:2008年10月02日
下面的图片是本案例中的链接背景图片:
下面是XHTML编码:
<<123456789101112131415>>
下面的图片是本案例中的链接背景图片:
下面是XHTML编码:
<div id="pagebar">
<a href="#"><<</a> <span class="page_now">1</span> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> <a href="#">11</a> <a href="#">12</a> <a href="#">13</a> <a href="#">14</a> <a href="#">15</a> <a href="#">>></a> </div> |
下面是CSS编码:
* {
margin:0; padding:0; text-decoration:none; } #pagebar { float:left; display:inline; width:570px; height:32px; margin:50px; font-size:13px; } #pagebar a,#pagebar .page_now { display:block; float:left; margin-right:4px; padding:2px 5px; border:1px solid #f30; color:#fff; font-weight:800; background:url(pagebar_bg.png) repeat-x 0 0 ; } #pagebar a { display:inline; } #pagebar a:hover { border:1px solid #03c; background-position:0 -30px; } #pagebar .page_now { border:1px solid #333; background-image:none; background:#666; } |
执行后效果图如下:
相关文章
- ·10/06地方网络工作室沉痛哀悼苹果乔帮主去世
- ·09/195个实用CSS应用技巧实例分享
- ·09/13CSS背景属性5个应用实例
- ·08/31Photoshop教程:设计Windows Vista光线效果
- ·07/12地方工作室 文章内容CSS炫酷效果公布
- ·06/17菏泽市场时令果蔬降价抢市
- ·04/14将写程序代码视为一种享受!
- ·02/28流量大不要怕 WordPress类型博客的优化法
- ·02/28CSS初学者技巧 CSS标准和最佳示例图
- ·02/28zblog和wordpress使用感受 还是选择zblog