今回は、ウェブサイトのページングのアイデアと、ウェブサイトを作成する際のページングの効果について説明します注意事項 以下は実際的なケースです。
ウェブサイトを作成する場合、多くのページングでは 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 サイトの他の関連記事を参照してください。