Heim > Artikel > Web-Frontend > Ideen für Website-Paging

Ideen für Website-Paging

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

Dieses Mal werde ich Ihnen die Paging-Ideen der Website und den Paging-Effekt bei der Erstellung der Website vorstellen. Was ist zu beachten? Hier ist ein praktischer Fall, schauen wir uns das an.

Beim Erstellen einer Website verwenden viele Seiten li für die Inline-Anzeige. Dies ist jedoch nicht förderlich für die Definition des Hintergrunds. Daher ist es am besten, li als Block und schwebend anzeigen zu lassen, um das Problem zu lösen, aber hier Das Problem besteht darin, dass die Seitenbreite nicht festgelegt ist und immer zentriert sein muss. Daher kann die Breite von ul nicht festgelegt werden, sodass der häufig verwendete Rand oder text-align nicht funktionieren wird Die Paginierung erfolgt immer zentriert und muss wie folgt definiert werden.
1. Textzentrierungsdefinition
Textzentrierung ist immer notwendig, also geben Sie dem UL-Außen-Div zunächst eine Textausrichtung (Textausrichtung: zentriert), und Sie können auch einen „Überlauf: versteckt; )“ angeben Natürlich können Sie auch die Höhe und Breite definieren.
2.ul-Definition
ul kann die Breite nicht definieren. Der Typ ist relativ (Position: relativ), und die linke Position ist 50 % (links: 50). %). Natürlich kann auch ein Float angegeben werden. Bitte beachten Sie, dass ul nicht mit overflow:hidden; ausgeblendet werden darf, damit ein Teil des li nicht angezeigt werden kann.
3.li-Definition
Die Definition von li ist nicht festgelegt. Der Typ ist relativ (Position: relativ). rechts: 50%), was genau das Gleiche ist wie ul. Im Gegenteil, ul ist auf diese Weise definiert, sodass li unabhängig von der Anzahl der Seiten immer zentriert werden kann.

<!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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Verwandte Lektüre:

Starttool für Benachrichtigungsleistenskripts, geschrieben in Python

JS implementiert Bayes'schen Klassifikator

So zeichnen Sie ein Musikringspektrogramm mit H5 Canvas

So verwenden Sie den js-xlsx-Zellenstil

Das obige ist der detaillierte Inhalt vonIdeen für Website-Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Vertikaler Zentriercontainer von HTML+CSSNächster Artikel：Vertikaler Zentriercontainer von HTML+CSS

In Verbindung stehende Artikel

Mehr sehen