静的ページング効果を実現する html+css の詳細な例 (コード付き)

Web サイトを閲覧するとき、Web ページ上のページング効果に気づきましたか? HTML と CSS を学習している皆さん、静的な HTML ページング コードを記述できますか?この記事では、例に基づいて HTML ページング効果を作成する手順を紹介します。最後に、興味のある友人が参照できるように HTML ページング コードを共有します。

ページング効果を実現するには、float、hover 疑似クラス セレクター、text-align など、CSS で多くの属性を使用する必要があります。不明な場合は、PHP 中国語の関連記事を参照してください。ウェブサイト、または CSS ビデオ チュートリアル にアクセスしてください。お役に立てれば幸いです。

静的なページング効果を実現するための HTML CSS 手順の詳細な例:

html パート

簡単に実行できるよう、

にクラス名を付けます。ページネーションは中央に配置されます。

タグ内に

タグを作成します。クリック ジャンプ効果が必要なため、li にタグを挿入する必要があります。タグの具体的なコードは次のとおりです:

<div class="center">
   <ul class="page">
       <li><a href="#">上一页</a></li>
       <li><a href="#">1</a></li>
       <li><a class="active" href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
       <li><a href="#">5</a></li>
       <li><a href="#">6</a></li>
       <li><a href="#">7</a></li>
       <li><a href="#">8</a></li>
       <li><a href="#">下一页</a></li>
   </ul>
  </div>

現在の効果は次のとおりです:

CSS 部分

上の画像から見ると、現在のページは見苦しいので、CSS を使用して美しくする必要があります。まず、float: left を使用して、順序なしリストを左にフローティングし、1 行に配置します。 text-decoration: none を使用して、a タグのデフォルトの下線を削除し、スペースを調整します。ページング効果への効果 具体的なコードは次のとおりです:

.page {
       display: inline-block;
       padding: 0;
       margin: 0;
   }   
   .page li {display: inline;}  
   .page li a {
       color: black;
       float: left;
       padding: 8px 16px;
       text-decoration: none;
       transition: background-color .3s;
       border: 1px solid #ddd;
   }   
   .page .active {
       background-color: #4CAF50;
       color: white;
       border: 1px solid #4CAF50;
   }  
   .page a:hover:not(.active) {background-color: #ddd;}   
   .center {text-align: center;}

効果は図に示すとおりです:

図からわかるように静的な HTML ページング効果が実現されました。マウスがページング コンテンツをクリックすると、アクティブ化された部分が緑色で表示され、マウスをページング コンテンツ上に置くと灰色で表示され、ページング効果全体が表示されます。ページの真ん中。

上記では、HTML と CSS を使用してページング効果を実現する方法を詳しく紹介しています。初心者の方は、より魅力的なページング効果を作成できるかどうかを確認してください。あなたは助けます！

【関連チュートリアルの推奨事項】

1. HTML ビデオ チュートリアル
2. CSS3 最新バージョンのリファレンス マニュアル
3. ##ブートストラップ チュートリアル

以上が静的ページング効果を実現する html+css の詳細な例 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。