ウェブサイトのページングのアイデア-jsチュートリアル-php.cn

ウェブサイトのページングのアイデア

php中世界最好的语言

リリース： 2018-03-12 16:41:10

オリジナル

1169 人が閲覧しました

今回は、ウェブサイトのページングのアイデアと、ウェブサイトを作成する際のページングの効果について説明します注意事項以下は実際的なケースです。

ウェブサイトを作成する場合、多くのページングでは li を使用してインライン表示しますが、これでは背景を定義するのに役立たないため、li をブロックとして表示し、float を追加して解決するのが最善の方法ですが、ここで問題があります、ページングは固定されておらず、常に中央に配置したい場合は ul の幅を固定できないため、ページングを常に中央に配置したい場合によく使用されるマージンや text-align は機能しません。中央にある場合は、次のメソッドを押して定義する必要があります。
1. テキストのセンタリングの定義
テキストのセンタリングは常に必要なので、まず ul の外側の div に text-align (テキストの配置: 中央揃え) を指定します。もちろん、「overflow: hidden;」を指定することもできます。高さと幅を定義します。
2.ul 定義
ul は幅を定義できません。位置を指定することしかできません。タイプは相対的 (position:相対)、左位置は 50% (left: 50%)、もちろん float も可能です。も与えられます。 ul を overflow: hidden; で非表示にして、li の一部が表示されないように注意してください。
3.li の定義
li の定義は ul の定義と似ています。幅は固定されておらず、型は相対的 (position: 相対) で、配置は 50% です (right: 50%)、これは ul の逆なので、li を定義した後は、ページが何ページ切れても常に中央に配置できます。

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

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 relatededaged Reading：Python

jsで書かれたnotification BarスクリプトスタートアップツールBayesian分類器を実装するためにH5のキャンバスを使用する方法js-xlsxの

以上がウェブサイトのページングのアイデアの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。