ウェブフロントエンド
htmlチュートリアル
HTML+CSS を使用して、図に示すようにレイアウトを実装します。境界幅 5 ピクセル、1 つのグリッド サイズは 50*50、ホバーすると境界線が赤になります (セマンティック構造を考慮して、IE6 以降と互換性があります)_html/css_WEB-ITnose
HTML+CSS を使用して、図に示すようにレイアウトを実装します。境界幅 5 ピクセル、1 つのグリッド サイズは 50*50、ホバーすると境界線が赤になります (セマンティック構造を考慮して、IE6 以降と互換性があります)_html/css_WEB-ITnose
Jun 24, 2016 am 11:35 AM
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< ;title>css 淘宝網テスト練習問題</title>
<style type="text/css">
*{margin: 0;padding: 0;font-size: 12px;line-height: 1;font - family: 'Microsoft Yahei',Arial;}
h1{background-color: green;color: #fff;padding: 10px;font-size: 16px;font-weight:normal;}
a{text-decoration: none ; }
#box1{幅: 180px;高さ: 180px;オーバーフロー: 非表示;}
#box1 a{表示: ブロック;フロート:左;z-index:1;ボーダー: 5 ピクセル青一色;マージン右: - 5 ピクセル; margin-bottom:-5px;width: 50px;height: 50px;line-height: 50px;text-align: center;}
#box1 a:hover{border-color: red;position:相対;z-index : 2;}
</style>
</head>
<body>
<h1>1. HTML+CSS を使用して、図に示すように、ボーダー幅 5 ピクセルのレイアウトを実装します。グリッドのサイズは 50 *50 で、ホバーすると境界線が赤になります (意味構造を考慮して IE6 以降と互換性があります) </h1>
<img src="http://images.cnitblog.com/blog/ 294743/201305/18155307-5204bc8ef6164feb87953dd7f264158b .gif">
<div id="box1">
<a href="#">1</a>
<a href="#"> 2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5< /a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a> ;
<a href= "#">9</a>
</div>
</html>
1. 兄弟要素の場合、ドキュメントはデフォルトでフローします。 (またはposition:static) 後の要素は前の要素を上書きします。
2. 同じレベルの要素の場合、位置が静的でなく、z インデックスが存在する場合、より大きな z インデックスを持つ要素は、より小さな z インデックスを持つ要素をカバーします。つまり、z インデックスが大きいほど、インデックスが大きいほど優先度が高くなります。
3. IE6/7 では、位置が静的ではなく、z-index が存在しない場合、z-index は 0 になります。他のブラウザでは、z-index は自動です。
4. z-index が auto である要素は、階層関係の比較に参加せず、z-index が auto ではない要素は比較に参加します。
人気の記事
人気の記事
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7287
9
1622
14
1342
46
1259
25
1206
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
