CSS でデジタル ページング効果のコードと手順を実装する方法

CSS でデジタル ページング効果のコードと手順を実装する方法
かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングもこの手法を採用しており、使用すると非常に美しくなります。
コード例は次のとおりです。

コードをコピー
コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<ヘッド>
<title>アリ族</title>
<スタイル タイプ="text/css">
ウル
{
リストスタイル:なし;
}
ウル・リ
{
フロート:左;
幅:22px;
高さ:22px;
左マージン:5px;
}
1つの
{
幅:20px;
高さ:20px;
表示:ブロック;
テキスト配置:中央;
テキスト装飾:なし;
背景色:白;
境界線:1px 実線 #666;
}
ホバー
{
幅:40px;
高さ:30px;
境界線:1px 実線 #666;
位置:絶対;
行の高さ:30px;
マージン:-5px 0 0 -10px;
}
</スタイル>
</head>
<本文>
<ul>
<li><a href="#">1</a></li>
<li><a 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>
</ul>
</本文>
</html>

上記のコードは目的の効果を実現します。実装手順を簡単に紹介します
1. float プロパティを使用して、li 要素を水平方向に揃えます。
2. a 要素をブロックレベル要素として設定し、そのサイズを設定します。
3. リンク疑似クラスを使用して、マウスをリンク上に置いたときに a 要素のサイズを制御し、絶対配置を使用することで、現在の a 要素が周囲の要素を覆うことができます。
特記事項: a 要素の背景色が白に設定されているのは、背景がデフォルトで透明になっているためです。背景色が設定されていない場合は、両側の境界線が覆われているのがわかります。

<<:  Mysql ALTER TABLE はフィールドを追加するときにテーブルをロックしますか?

>>:  長いデータを HTML で表示するときに処理する方法

推薦する

MySQL 8.0 の新機能 - チェック制約の紹介

目次序文チェック制約作成、削除、表示制限要約する序文MySQL 8.0 では、チェック制約という非常...

nginx を使用してカナリアリリースをシミュレートする方法

この記事では、ブルーグリーン デプロイメントと、nginx を使用してカナリア リリースを最も簡単な...

nginxサーバーのダウンロード、インストール、使用方法の詳細な説明

ダウンロードhttp://nginx.org/en/download.html解凍ダウンロードしたn...

マウスオーバーボタンアニメーションを実現する純粋な CSS3 パート 2

前の 2 つの章を終えて、ボタンのフローティング アニメーションについて新たな理解が得られましたか?...

JSの高階関数5つを共有する

目次1. はじめに2. 再帰3. コールバック関数3.1 匿名コールバック関数3.2 パラメータ付き...

Linux で最も頻繁に使用されるターミナル コマンドのトップ 10 のリストを取得します。

私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...

Linux (CentOS) システムで MySQL データベース ディレクトリの場所を変更する方法

CentOS システムで MySQL データベース ディレクトリの場所を変更する方法1. まず、My...

ウェブページの画像最適化ツールと使用方法のヒントの共有

ウェブページの基本要素として、画像はページの読み込み速度に影響を与える重要な要素の 1 つです。画像...

Django がローカル MySQL データベースに接続する手順 (pycharm)

ステップ1:setting.pyでデータベースを変更する # データベースを構成する DATABAS...

MySQL 8.0 のメモリ消費の詳細な分析

目次1. innodb_buffer_pool_size 2. innodb_log_buffer_...

vue構成ファイルはルーティングとメニューインスタンスコードを自動的に生成します

目次前面に書かれたルータ.jsonルート生成メニュー生成効果要約する前面に書かれたルートを繰り返し記...

HTML テーブル セルの幅と高さを設定する方法

Web ページを作成するときに、テーブルの幅が揃っていないという問題に遭遇することがよくあります。 ...

HTML CSS を使用して div またはテーブルを指定した位置に固定する方法

CSSコードコンテンツをクリップボードにコピー.bottomTable{背景色: rgb (249,...