シンプルなナビゲーションバー機能を実現するHTML+CSS

さっそく、コードを見てみましょう（初心者：特に言うことはありません）

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
    <メタ文字セット="utf-8" />
    <title>ナビゲーション バー</title>
    <スタイル タイプ="text/css">
     #nav{
         幅:100%;
         高さ:39px;
        マージン:0px;
        背景:#808080
    }
     #nav ul li{
         マージン:5px 10px;
         フロート:左;
         リストスタイル:なし;
     }
     #nav ul li a{
         フロート:左;
         パディング:0px 16px;
         <!--マージン:自動;-->
         色:#ffffff;
         フォントサイズ:15px;
     }
    </スタイル>
</head>
<本文>
    <div id="nav">
        <ul>
            <li><a href="#">ホーム</a></li>
            <li ><a href="#">友達</a></li>
            <li ><a href="#">ショップ</a></li>
            <li ><a href="#">クライアントをダウンロードする</a></li>
        </ul>
    </div>
</本文>
</html>

主なことは、CSS (Cascading Style Sheets) を使用して HTML コンテンツをフォーマットすることです (表現はあまり得意ではありません)。

識別子を直接使用して要素のフォーマットを設定できます。ID が nav の要素をフォーマットするには、その前に # を追加します。class="nav" のフォーマットを変更するには、nav の前に "." を追加します。

私はこれら 3 つのアプリケーションにあまり詳しくないので、詳細には触れません。専門家が私に何らかのアドバイスをくれたり、誰かが私と話し合ったりしてくれることを願っています。

CSS コードは、開始タグ<style type="txt/css">、終了タグ</style>を使用して HTML ドキュメントのヘッダーに記述できます。つまり、ヘッダーに埋め込むことができます。

これはシンプルなナビゲーションバーのCSSコードです。あまり多くはなく、ヘッドに埋め込まれているだけです。

上記はCSSを参照する方法です: 埋め込みスタイルシート

-------------------------------------------------------------------------------------------------------------------------------

CSS コードが多数ある場合は、CSS ファイルに直接コードを記述し、リンクタグを使用して HTML ファイルの先頭にスタイルシート CSS を導入することができます。

上記の事実を引用する2番目の方法：外部スタイルシート（最近のWebページは複雑なので、この方法の方が一般的に使用されています）

もう 1 つのタイプはインラインスタイルシートですが、ここでは説明しません。

要約する

上記は、HTML + CSS で実装されたシンプルなナビゲーションバー機能のエディターによる紹介です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: 透明な入力ボックスにアイコンを追加する HTML コード

>>: CentOS 7 はネットワークカードを変更した後、インターネットにアクセスできません