使用CSS调整PHP分页页面列表

时间:2016-05-27 14:42:39

标签: php html css pagination

我创建了以下分页(见图片);

image

这里我要显示"下一个>>"和"最后"在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>

0 个答案:

没有答案