css完成的好看的分页查询实际效果编码(橘黄色与

日期:2021-03-13 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站


在做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 ⑶0px;
}
#pagebar .page_now {
border:1px solid #333;
background-image:none;
background:#666;
}

预览实际效果:

提醒:您能够先改动一部分编码再运作