网页制作 
首页 > 网页制作 > 浏览文章

css实现的漂亮的分页效果代码(橘黄色与蓝色)

(编辑:jimmy 日期: 2025/5/1 浏览:3 次 )
css实现的漂亮的分页效果代码(橘黄色与蓝色)
在做pj皮肤的时候到网上搜了个分页效果,因为颜色不搭就没用,但是个人认为挺漂亮。代码也够简洁。

下面是用的背景图片:

css实现的漂亮的分页效果代码(橘黄色与蓝色)
html代码:

复制代码代码如下:
<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;
}

预览效果:

提示:您可以先修改部分代码再运行
上一篇:CSS 解决未知高度垂直居中实现代码
下一篇:CSS 分页效果制作实例教程
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。