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 で表示するときに処理する方法