インターネットで検索したところ、純粋に CSS を使用してラベル ナビゲーションを作成するチュートリアルや手順はあまり見られず、ほとんどが JS の記述を必要としていました。これは CSS を学習している多くの人にとって非常に配慮に欠けますが、誰もやったことがないので、まずは私が試してみましょう。ここで私が行っている CSS ラベル ナビゲーションは、純粋な CSS、JS、背景画像なしの緑色のナビゲーションです。この記事は初心者に適していますが、専門家はスルーしても構いません (笑)。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ナビ02</title> <style type="text/css"> *{ マージン:0; パディング:0; } .mainNav{ マージン:0 20px; 高さ:47ピクセル; border-bottom:2px ソリッド #000; } ウル{ マージン:20ピクセル; マージン-ボトム:0; パディング左:20px; リストスタイルタイプ:なし; フォントサイズ:12px; 位置:絶対; } ウリ{ フロート:左; マージン右:5px; } ウルリア{ 表示ブロック; 幅:100ピクセル; 行の高さ:25px; テキスト整列:中央; 色:#999; 背景色:#FC0; ボーダー:2px ソリッド #000; } ul li a:ホバー{ 高さ:27ピクセル; 背景色:#F60; ボーダーボトム:なし; } #nav01 ウルリ a#nav001, #nav02 ウルリ a#nav002, #nav03 ウルリ a#nav003{ 幅:100ピクセル; 高さ:27ピクセル; 色:#FFF; 背景色:#F60; ボーダー:2px ソリッド #000; ボーダーボトム:なし; } .con{ マージン:0 20px; パディング:20ピクセル; 色:#FFF; 背景色:#F60; ボーダー:2px ソリッド #000; ボーダートップ:なし; } </スタイル> <body id="nav01"> <div class="mainNav"> <ul> <li><a href="#" id="nav001">スクリプト ハウス 01 <li><a href="#" id="nav002">スクリプト ハウス 02 <li><a href="#" id="nav003">スクリプト ホーム 03 </style> スクリプト ホーム www.jb51.net >
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
