BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css

2022-01-26 20:44:17

さっそく、コードを見てみましょう。 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>navigation bar</title>
    <style type="text/css">
     #nav{
         width:100%;
         height:39px;
        margin:0px;
        background:#808080
    }
     #nav ul li{
         margin:5px 10px;
         float:left;
         list-style:none;
     }
     #nav ul li a{
         float:left;
         padding:0px 16px;
         <! --margin:auto;-->
         color:#ffffff;
         font-size:15px;
     }
    </style>
</head>
<body>
    <div id="nav">
        <ul >
            <li ><a href="#">home</a></li>
            <li ><a href="#">friends</a></li>
            <li ><a href="#">mall</a></li>
            <li ><a href="#">Download Client</a></li>
        </ul>
    </div>
</body>
</html>

は、ほとんどがcss（カスケーディングスタイルシート）でhtmlの内容を整形しています（あまり表現力はない）。

idがnavの要素は#を前につけて整形し、class="nav"は"."をつけて整形します。

この3つの応用はまだよくわからないので割愛しますが、ここはどなたかご指導いただくか、どなたか相談にのっていただければと思います。

cssのコードは <style type="txt/css">. エンドマーカー </style> html文書のheadに書かれている、つまりheadの中にインラインで書かれている。

以下は、私のシンプルなナビゲーションバーのCSSコードで、head内にあまりインラインではありません。

上記は、cssの参照方法：インラインスタイルシート

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

さらにCSSコードがある場合は、CSSファイルに直接コードを記述し、htmlファイルのheadにlinkタグでスタイルシートのCSSを導入することができます。

上記の事実を参照する第二の方法：外部スタイルシート（現在では、ウェブページの複雑化に伴い、この方法がよく使われるようになりました）

また、ここでは説明しないが、インラインスタイルシートというものもある。

概要

上記は、シンプルなナビゲーションバー機能を実現するためのhtml + cssの小さな導入であり、私はそれがあなたの助けになることを願って、あなたが何か質問がある場合は私にメッセージを与えてください、私は速やかにみんなに返信されます。あなたが何か質問がある場合は、私にメッセージを残してください、私はタイムリーにあなたに返信されます。また、スクリプトハウスのウェブサイトを応援していただき、ありがとうございました!

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します