CSS中上一页下一页怎么做？？图片所示那中

html-css014

CSS中上一页下一页怎么做？？图片所示那中,第1张

发一个给你吧，

<style>

DIV.fenye {

PADDING-RIGHT: 3pxPADDING-LEFT: 3pxPADDING-BOTTOM: 3pxMARGIN: 3pxPADDING-TOP: 3pxTEXT-ALIGN: center

}

DIV.fenye A {

BORDER-RIGHT: #fff 1px solidPADDING-RIGHT: 5pxBORDER-TOP: #fff 1px solidPADDING-LEFT: 5pxPADDING-BOTTOM: 2pxMARGIN: 2pxBORDER-LEFT: #fff 1px solidCOLOR: #000099PADDING-TOP: 2pxBORDER-BOTTOM: #fff 1px solidTEXT-DECORATION: underline

}

DIV.fenye A:hover {

BORDER-RIGHT: #000099 1px solidBORDER-TOP: #000099 1px solidBORDER-LEFT: #000099 1px solidCOLOR: #000BORDER-BOTTOM: #000099 1px solid

}

DIV.fenye A:active {

BORDER-RIGHT: #000099 1px solidBORDER-TOP: #000099 1px solidBORDER-LEFT: #000099 1px solidCOLOR: #f00BORDER-BOTTOM: #000099 1px solid

}

DIV.fenye SPAN.current {

BORDER-RIGHT: #fff 1px solidPADDING-RIGHT: 5pxBORDER-TOP: #fff 1px solidPADDING-LEFT: 5pxFONT-WEIGHT: boldPADDING-BOTTOM: 2pxMARGIN: 2pxBORDER-LEFT: #fff 1px solidCOLOR: #000PADDING-TOP: 2pxBORDER-BOTTOM: #fff 1px solidBACKGROUND-COLOR: #fff

}

DIV.fenye SPAN.disabled {

BORDER-RIGHT: #eee 1px solidPADDING-RIGHT: 5pxBORDER-TOP: #eee 1px solidPADDING-LEFT: 5pxPADDING-BOTTOM: 2pxMARGIN: 2pxBORDER-LEFT: #eee 1px solidCOLOR: #dddPADDING-TOP: 2pxBORDER-BOTTOM: #eee 1px solid

}

</style>

<div class=fenye><span class=disabled><</span><span class=current>1</span><a href=2>2</a><a href=3>3</a><a href=4>4</a><a href=5>5</a><a href=6>6</a><a href=7>7</a>...<a href=199>199</a><a href=200>200</a><a href=2>></a></div>

可以扩展许多种自己需要的。

用CSS是不能分页的，分页是程序控制的。

比如说：有100条数据要在页面展示，每次展现10条，一共10页。

程序会在第一页取出1--10条数据给静态页面展示。

到第二页的时候在去11--20条数据给静态页面展示。

当然你要给程序相对应的参数，他才能从数据库里面取出来。

美工只做一个展现页面给程序员，分页就是在静态页面上某个位置写上“上一页”、“下一页”、“第一页”、“最后一页”“共多少页”，或者是数字的1、2、3、4、5、6那种，剩下的程序员就会搞定一切的。

CSS只能做装饰，不能分页。