HTML の複数のサブページに統合ヘッダーを追加するにはどうすればよいですか?
P粉293341969
2023-09-03 12:51:38
<p>ナビゲーション バー システムを開発していますが、元のページのタイトルを残したままサブページを変更する方法を知りたいです。 (私は repl.it を使用しているので、注意してください)。 </p>
<p>フォルダにはまだ何も入れていません。
また、「アクティブ」クラス（灰色のもの）の項目の上にマウスを移動したときに色が変わらないようにしたいです。 </p>
<p>
<pre class="brush:css;toolbar:false;">@import url('https://fonts.googleapis.com/css2?family=Roboto Mono:wght@700&display=swap');
html本文{
背景: #0E1212;
}
ウル {
リストスタイルタイプ: なし;
マージン: 0;
パディング: 0;
オーバーフロー: 非表示;
背景色: なし;
フォントファミリー: 'Roboto Mono'、等幅;
}
リ {
フロート: 左;
}
り、{
表示ブロック;
色: #DBDBDB;
テキスト整列: 中央;
パディング: 14px 16px;
テキスト装飾: なし。
}
li a:ホバー{
カラー: #682AE9;
アニメーション名: 例;
アニメーション期間: 0.5 秒。
アニメーション反復数: 1;
アニメーションフィルモード: 順方向;
}
。アクティブ {
色: #808080;
}
@keyframes の例 {
0% {色: #DBDBDB;}
100% {カラー: #622cd8;)
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="ja">
<頭>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA 互換" content="IE=edge">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<リンク rel="スタイルシート" href="home.css">
<script src='script.js'> </script>
<title>ホーム</title>
</head>
<本体>
</head>
<本体>
<ul id='メニュー'>
<li><a class="active" href="#home" id="home">.home()</a></li>
<li><a class="inactive" href="#news">.about()</a></li>
<li><a class="inactive" href="#contact">.stuff()</a></li>
<li><a class="inactive" href="#about">.apply()</a></li>
</ul>
</ボディ>
</html></pre>
</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
ホバー時にアクティブなクラスの色を一定に保つことに関する質問の部分に答えるために、私がやったことは、
0%およびそれらすべてにあるような別の@keyframeを作成することでした。100%では灰色のままです。次に、transition: 0.5s;を使用して、色の変化のアニメーション遷移を滑らかにします。ご覧のとおり、最初のリンク (つまり、アクティブ状態) にカーソルを合わせると、リンクはまだ灰色で、他のリンクは
0.5 秒以内に紫色に変わります。