かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングもこの手法を採用しており、使用すると非常に美しくなります。 コード例は次のとおりです。 コードをコピー コードは次のとおりです。<!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 では、チェック制約という非常...
この記事では、ブルーグリーン デプロイメントと、nginx を使用してカナリア リリースを最も簡単な...
ダウンロードhttp://nginx.org/en/download.html解凍ダウンロードしたn...
前の 2 つの章を終えて、ボタンのフローティング アニメーションについて新たな理解が得られましたか?...
目次1. はじめに2. 再帰3. コールバック関数3.1 匿名コールバック関数3.2 パラメータ付き...
私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...
CentOS システムで MySQL データベース ディレクトリの場所を変更する方法1. まず、My...
ウェブページの基本要素として、画像はページの読み込み速度に影響を与える重要な要素の 1 つです。画像...
ステップ1:setting.pyでデータベースを変更する # データベースを構成する DATABAS...
目次1. innodb_buffer_pool_size 2. innodb_log_buffer_...
導入最近、Docker の ARM バージョンがあることを知りました。 hub.docker.com...
Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...
目次前面に書かれたルータ.jsonルート生成メニュー生成効果要約する前面に書かれたルートを繰り返し記...
Web ページを作成するときに、テーブルの幅が揃っていないという問題に遭遇することがよくあります。 ...
CSSコードコンテンツをクリップボードにコピー.bottomTable{背景色: rgb (249,...