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

前端  /  管理员 发布于 7年前   157


在做pj皮肤的时候到网上搜了个分页效果，因为颜色不搭就没用，但是个人认为挺漂亮。代码也够简洁。

下面是用的背景图片：


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 分页效果制作实例教程

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客