css 中 怎么做分页

html-css011

css 中 怎么做分页,第1张

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

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

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

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

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

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

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

首先在列表模版写分页样式的时候把这段代码复制进去:

<div class="dede_pages">

<ul class="pagelist">

{dede:pagelist listitem="info,index,end,pre,next,pageno,option" listsize="5"/}

</ul>

</div>

然后在把css样式加入到你自己的css文件里面

.dede_pages{height:30pxbackground:#eeeeeemargin:15px 015px 12pxwidth:690pxfloat:lefttext-align:centerdisplay:inline

}

.dede_pages ul{

list-style-type: nonetext-align: center

}

.dede_pages ul li{

display: inline

}

.dede_pages ul li a{

background:#fffpadding:3px 5pxline-height:30pxmargin:0 2pxfont-family:Arial

}

.dede_pages ul li a:hover{

color:#690

text-decoration:none

padding:2px 4px 2px

}

.dede_pages ul li.thisclass,

.dede_pages ul li.thisclass a,.pagebox ul li.thisclass a:hover{

background-color:#F8F8F8

padding:2px 4px 2px

font-weight:bold

}

.dede_pages .pageinfo{

line-height:21px

padding:12px 10px 12px 16px

color:#999

}

.dede_pages .pageinfo strong{

color:#555

font-weight:normal

margin:0px 2px

}

<%

set con=server.CreateObject("ADODB.Connection")

strConnection="Data Source=xxxxxxx"

con.Open strConnection

set rs = Server.CreateObject("ADODB.Recordset")

chartSQL="select ID,name,category_one from goods "

rs.Open chartSQL,con,1,3

if rs.EOF or rs.BOF then '如果为空

response.end

end if

pagesize=10 '每页显示10条记录

pagecuont=rs.PageCount '总页数

recordcount=rs.RecordCount

dim pagenum '当前页码

dim currentRecord '当前页的记录数,对于末页其值不等于pagesize

if Request.QueryString ("pageNum")="" then

pageNum=1

else

pageNum=Request.QueryString ("pageNum")

rs.AbsolutePage =trim(Request.QueryString ("pageNum"))

end if

%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>New Page 1</title>

<SCRIPT LANGUAGE=javascript>

<!--

function openwindow(url){

window.open(url,'','resizable=no,width=240,height=160,fullscreen=yes')

}

//-->

</SCRIPT>

<link rel="stylesheet" href="file:///F|/mysourceof17560/CSS.CSS" type="text/css">

</head>

<body bgcolor=#999999>

<p align="center">商品修改页面</p>

<table border="1" width="100%" cellpadding="0" cellspacing="0" bordercolordark="#999999" bordercolorlight="#000000">

<tr>

<td width="10%">

<div align="center">编号 </div>

</td>

<td width="63%">

<div align="center">商品名 </div>

</td>

<td width="14%">

<div align="center">主分类</div>

</td>

<td width="13%">

<div align="center">操作 </div>

</td>

</tr>

<%

for i=1 to rs.PageSize

if rs.EOF or rs.BOF then '本条件判断是否到了尽头

exit for

end if

%>

<tr>

<td width="10%" align=center><%=rs("ID")%></td>

<td width="63%" align=center><%=rs("name")%></td>

<td width="14%" align=center><%=rs("category_one")%></td>

<td width="13%">

<div align="center">

<INPUT type="button" value="Button" id=button1 name=button1

onclick="javascript:window.open('tomodify.asp?id=<%=rs("ID")%>&zfenlei=<%=rs("category_one")%>','','resizable=no,width=240,height=160')">

</div>

</td>

</tr>

<%

currentRecord=currentRecord+1 '取的当前页的记录数

rs.MoveNext

next

rs.Close

%>

</table>

<div align="center" class="bfont">合计<%=recordCount%>条记录 | 第

<%

pageNum_record=(pageNum-1)*pageSize+1 '初始记录位置

pageNum_record_=pageNum_record+currentRecord-1 '末记录位置

Response.Write pageNum_record

%>

-<%=pageNum_record_%>条 | 第<%=pageNum%>页 |共<%=pagecuont%>页

<%

if pagecuont >0 then '防止当前返回的为空记录,即数据库中该数据集为空

if pageNum >1 then %>

<a href="modifychart.asp?pageNum=1"><font color="#FFFFFF">首页</font></a>

<%

else Response.Write "首页"

end if

if pageNum >10 then

'如有需要,请在这里添上如果不足10页时该实现前n页的代码,

'请参考下面的如果后面不足10页时该怎么样处理的代码和思路

%>

<a href="modifychart.asp?pageNum=<%=(pageNum-10)%>"><font color="#FFFFFF">前10页</font></a>

<%

end if

if (pageNum+10) <pagecuont then

'这里也相同参考下面的思路

%>

<a href="modifychart.asp?pageNum=<%=(pageNum+10)%>"><font color="#FFFFFF">下10页</font></a>

<%

end if

if (pageNum+10) <pagecuont then

'这里判断后面是否还有10页

endpage=pageNum+9

else

endpage=pageCount

end if

for i=pageNum to endPage

%>

<a href="modifychart.asp?pageNum=<%=i%>">第<%=i%>页</a>

<%

next

if pageNum <>pageCount then

%>

<a href="modifychart.asp?pageNum=<%=pagecuont%>"><font color="#FFFFFF">末页</font></a>

<%

end if

end if 'end of --->if pageCount >0 then

%>

</div>

</body>

</html>