ホームページ > 記事 > ウェブフロントエンド > ウェブサイトのページングのアイデア
ウェブサイトのページングのアイデア
- php中世界最好的语言オリジナル
- 2018-03-12 16:41:101107ブラウズ
今回は、ウェブサイトのページングのアイデアと、ウェブサイトを作成する際のページングの効果について説明します注意事項 以下は実際的なケースです。
ウェブサイトを作成する場合、多くのページングでは 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 サイトの他の関連記事を参照してください。