Home > Article > Web Front-end > Website paging ideas

Website paging ideas

php中世界最好的语言Original: 2018-03-12 16:41:101107browse

This time I will bring you the paging ideas of the website and the paging effect when making the website. What are the precautions? . The following is a practical case. Let’s take a look.

When making a website, many paging uses li to display inline, but this is not conducive to defining the background, so the best way is to let li display as a block and add float to solve the problem, but here is a The problem is, because the paging is not fixed, and it must always be centered, the width of ul cannot be fixed, so the commonly used margin or text-align will not work. I want to Pagination is always centered and must be defined as follows.
1. Text centering definition
Text centering is always necessary, so first give the ul outer div a text-align (text alignment: centered), and you can also give an "overflow: hidden; )", of course you can also define the height and width.
2.ul definition
ul cannot define the width, we can only give one positioning, the type is relative (position: relative), the left position is 50% (left: 50%), Of course a float can also be given. Please note that ul must not be hidden with overflow: hidden;, so that part of the li cannot be displayed.
3.li definition
The definition of li is similar to that of ul. The width is not fixed. It also gives a positioning. The type is relative (position: relative). The placement right is 50% (right: 50%), which is exactly the same as On the contrary, ul is defined in this way so that li can always be centered regardless of the number of pages.

<!doctype html><html><head><meta charset="utf-8"><title>by eric zheng</title><style type="text/css">
    *{margin:0; padding: 0;}    ol{list-style: none;}    ol{        height: 32px;        border: solid 1px red;        position: absolute;        left: 50%;
    }    li{        position: relative;        left: -50%;        width: 30px;        height: 30px;        border: solid 1px #ccc;        text-align: center;        line-height: 30px;        font-size: 14px;        margin: 0 5px;        float: left;
    }</style></head><body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ol></body></html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Website paging ideas

Related articles