php 分页样式css样式,CSS分页样式

JavaScript: showPages v1.0 [by Lapuasi.com]

/* Pages Main Tyle */

.pages {

color: #000000;

cursor: default;

font-size: 10px;

font-family: Tahoma, Verdana;

padding: 3px 0px 3px 0px;

}

.pages .count, .pages .number, .pages .arrow {

color: #000000;

font-size: 10px;

background-color: #F7F7F7;

border: 1px solid #CCCCCC;

}

/* Page and PageCount Style */

.pages .count {

font-weight: bold;

border-right: none;

padding: 2px 10px 1px 10px;

}

/* Mode 0,1,2 Style (Number) */

.pages .number {

font-weight: normal;

padding: 2px 10px 1px 10px;

}

.pages .number a, .pages .number span {

font-size: 10px;

}

.pages .number span {

color: #999999;

margin: 0px 3px 0px 3px;

}

.pages .number a {

color: #000000;

text-decoration: none;

}

.pages .number a:hover {

color: #0000ff;

}

/* Mode 3 Style (Arrow) */

.pages .arrow {

font-weight: normal;

padding: 0px 5px 0px 5px;

}

.pages .arrow a, .pages .arrow span {

font-size: 10px;

font-family: Webdings;

}

.pages .arrow span {

color: #999999;

margin: 0px 5px 0px 5px;

}

.pages .arrow a {

color: #000000;

text-decoration: none;

}

.pages .arrow a:hover {

color: #0000ff;

}

/* Mode 4 Style (Select) */

.pages select, .pages input {

color: #000000;

font-size: 10px;

font-family: Tahoma, Verdana;

}

/* Mode 5 Style (Input) */

.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {

color: #666666;

font-weight: bold;

background-color: #F7F7F7;

border: 1px solid #CCCCCC;

}

.pages .input input.ititle {

width: 70px;

text-align: right;

border-right: none;

}

.pages .input input.itext {

width: 25px;

color: #000000;

text-align: right;

border-left: none;

border-right: none;

}

.pages .input input.icount {

width: 35px;

text-align: left;

border-left: none;

}

.pages .input input.ibutton {

height: 17px;

color: #FFFFFF;

font-weight: bold;

font-family: Verdana;

background-color: #999999;

border: 1px solid #666666;

padding: 0px 0px 2px 1px;

margin-left: 2px;

cursor: hand;

}

/* body */

body {

font-size: 12px;

}

---------------------------------------------------------------------------------------------------------------------------

5.

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

仿豆瓣分页原型(Javascript版) - twocity.cn

/* Paginator */

.paginator {

font: 14.8px normal Arial, Helvetica, sans-serif;

color: #666666;

margin-top: 10px;

margin-bottom: 5px;

line-height: 150%;

background-color: #EEFFEE;

text-align: center;

}

.paginator a, .thispage, .break {

padding: 2px 4px;

}

.paginator .prev {

margin-right: 20px;

}

.paginator .next {

margin-left: 20px;

}

.paginator .count {

margin-left: 20px;

font-size: 11px;

}

function QueryString(item){

var sValue=location.search.match(new RegExp("[\?\&]"+item+"=([^\&]*)(\&?)","i"))

return sValue?sValue[1]:sValue

}

var count = 560;

var perpage = 20;

var currentpage = QueryString("page");

if (currentpage==null){

currentpage = 1;

}else{

currentpage = parseInt(currentpage);

}

var pagecount = Math.floor(count/perpage);

var pagestr = "";

var breakpage = 9;

var currentposition = 4;

var breakspace = 2;

var maxspace = 4;

var prevnum = currentpage-currentposition;

var nextnum = currentpage+currentposition;

if(prevnum<1) prevnum = 1;

if(nextnum>pagecount) nextnum = pagecount;

pagestr += (currentpage==1)?'< 前页':'< 前页';

if(prevnum-breakspace>maxspace){

for(i=1;i<=breakspace;i++)

pagestr += ''+i+'';

pagestr += '...';

for(i=pagecount-breakpage+1;i

pagestr += ''+i+'';

}else{

for(i=1;i

pagestr += ''+i+'';

}

for(i=prevnum;i<=nextnum;i++){

pagestr += (currentpage==i)?''+i+'':''+i+'';

}

if(pagecount-breakspace-nextnum+1>maxspace){

for(i=nextnum+1;i<=breakpage;i++)

pagestr += ''+i+'';

pagestr += '...';

for(i=pagecount-breakspace+1;i<=pagecount;i++)

pagestr += ''+i+'';

}else{

for(i=nextnum+1;i<=pagecount;i++)

pagestr += ''+i+'';

}

pagestr += (currentpage==pagecount)?'后页 >':'后页 >';

document.getElementById("pagebar").innerHTML = pagestr;

-----------------------------------------------------------------------------------------------------------------------

6.

Css分页效果(一)

<<

<

1

2

3

4

5

6

7

8

>

>>

Pages: 2 / 12