我创建了以下分页(见图片);
这里我要显示"下一个>>"和"最后"在28岁结束时,我无法更改代码以实现该顺序,因为我在我的PHP代码中使用if else块;
这是代码部分;
echo "<ul class='pagination'>";
echo "Page: $page of $last <br>";
echo "Record count: ". $rec_count. "<br>";
echo "Left count: ". $left_rec. "<br>";
echo "Record limit: ". $rec_limit. "<br>";
if( ($page==1) && ($left_rec>0) ){ //this is first page
echo '<li> <a href="'. $_SERVER['PHP_SELF']. '?page='. ($page+1). '"> Next >> <br></a> </li>';
echo "<li> <a href=\"{$_SERVER['PHP_SELF']}?page=$last\"> Last </a> </li>";
}
else if( ($page>1) && ($left_rec>0) ){
echo "<li> <a href=\"{$_SERVER['PHP_SELF']}?page=$first\"> First <br></a> </li>";
echo '<li> <a href="'. $_SERVER['PHP_SELF']. '?page='. ($page-1) . '"> << Previous <br></a> </li>';
echo '<li> <a href="'. $_SERVER['PHP_SELF']. '?page='. ($page+1). '"> Next >> <br></a> </li>';
echo "<li> <a href=\"{$_SERVER['PHP_SELF']}?page=$last\"> Last </a> </li>";
}
else if( ($page>1) && ($left_rec<$rec_limit) ){
echo "<li> <a href=\"{$_SERVER['PHP_SELF']}?page=$first\"> First </a> </li>";
echo '<li> <a href="'. $_SERVER['PHP_SELF']. '?page='. ($page-1). '"> << Previous <br></a> </li>';
}
/* Displaying page numbers (optional) */
for( $i=1; $i<=$last; $i++ ){
if( $i==$page ){
echo "<li> <a class=\"current\" href=\"{$_SERVER['PHP_SELF']}?page=$i\"> $i </a> </li>";
}
else{
echo "<li> <a href=\"{$_SERVER['PHP_SELF']}?page=$i\"> $i </a> </li>";
}
}
echo "</ul>";
如何使用CSS实现这一目标?到目前为止我使用了CSS:
<style>
ul.pagination{
text-align:center;
color:#829994;
}
ul.pagination li{
display:inline;
padding: 0px 3px; /* here we cannot specify padding for top and bottom because inline display does not support margins and
paddings top and bottom*/
}
ul.pagination a{
color:#0d7963;
display:inline-block;
border:1px solid #cde0dc;
margin:3px 0;
padding:5px 10px;
text-decoration: none;
}
ul.pagination a:hover,
ul.pagination a.current{
background:#0d7963;
color:#fff;
}
</style>