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

シンプルなナビゲーションバー機能を実現する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 はネットワークカードを変更した後、インターネットにアクセスできません

推薦する

MySQL は、現在のデータ テーブル内のすべての時間に対して指定された時間間隔を増加または減少させます (推奨)

DATE_ADD() 関数は、指定された時間間隔を日付に追加します。現在のテーブル内のすべてのデー...

CSS を使用して固定左列と適応右列の 2 列レイアウトを実現する 4 つの方法

1. フロート+オーバーフロー:非表示このメソッドは主にオーバーフローを通じて BFC をトリガーし...

MySQL 結合バッファの原理

目次1. MySQL 結合バッファ2. JoinBufferCacheストレージスペースの割り当て3...

HTMLタグIDは変数にできる

<table id=" <%=var1%>">、var1...

Zabbixについて管理者ログインパスワードを忘れた場合、パスワードをリセットする

Zabbix 管理者ログイン パスワードのリセットに関する問題は次のとおりです。 1. 問題の説明:...

Linux での mysql8.018 のインストールと設定のプロセスの詳細な説明

Windowsでのインストールの紹介:こちらもご覧ください –》WindowsでのMySQL 8.0...

MYSQL ストアドプロシージャと関数の簡単な記述

ストアドプロシージャとは簡単に言えば、これは強力で、JAVA 言語のメソッドに似た比較的複雑な論理関...

MySql テーブル内の行を削除する実用的な方法

まず、どのフィールドまたはフィールドの組み合わせがデータ行を一意に識別できるかを決定する必要がありま...

CSSは固定比率のブロックレベルコンテナを簡単に実装できる

H5 レイアウトを設計する場合、通常はバナーに遭遇することになります。例えば、2:1 で表示したい場...

vuexサードパーティパッケージを使用してデータの永続性を実装する方法

目的: vuex で管理されている状態データを同時にローカルに保存できるようにします。独自のストレー...

MySQL データをエクスポートおよびインポートするための HeidiSQL ツール

場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...

Ubuntu での MySQL および MySQL Workbench のインストール チュートリアル

Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...

Linux システムが VMware にインストールされているかどうかを確認する方法

現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...

Windows 2016 Server セキュリティ設定

目次システムアップデート構成Windows Update サーバーの変更自動更新を有効にして許可する...

CentOS7.x のアンインストールとインストール MySQL5.7 の操作手順とエンコード形式の変更方法

1. MySQL 5.7 のアンインストール1.1查看yum是否安裝過mysql CD yum li...