さっそく、コードを見てみましょう(初心者:特に言うことはありません) <!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 コードは、開始タグ これはシンプルなナビゲーションバーのCSSコードです。あまり多くはなく、ヘッドに埋め込まれているだけです。 上記はCSSを参照する方法です: 埋め込みスタイルシート ------------------------------------------------------------------------------------------------------------------------------- CSS コードが多数ある場合は、CSS ファイルに直接コードを記述し、リンク タグを使用して HTML ファイルの先頭にスタイルシート CSS を導入することができます。 上記の事実を引用する2番目の方法:外部スタイルシート(最近のWebページは複雑なので、この方法の方が一般的に使用されています) もう 1 つのタイプはインライン スタイル シートですが、ここでは説明しません。 要約する 上記は、HTML + CSS で実装されたシンプルなナビゲーション バー機能のエディターによる紹介です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: 透明な入力ボックスにアイコンを追加する HTML コード
>>: CentOS 7 はネットワークカードを変更した後、インターネットにアクセスできません
DATE_ADD() 関数は、指定された時間間隔を日付に追加します。現在のテーブル内のすべてのデー...
1. フロート+オーバーフロー:非表示このメソッドは主にオーバーフローを通じて BFC をトリガーし...
目次1. MySQL 結合バッファ2. JoinBufferCacheストレージスペースの割り当て3...
<table id=" <%=var1%>">、var1...
Zabbix 管理者ログイン パスワードのリセットに関する問題は次のとおりです。 1. 問題の説明:...
Windowsでのインストールの紹介:こちらもご覧ください –》WindowsでのMySQL 8.0...
ストアドプロシージャとは簡単に言えば、これは強力で、JAVA 言語のメソッドに似た比較的複雑な論理関...
まず、どのフィールドまたはフィールドの組み合わせがデータ行を一意に識別できるかを決定する必要がありま...
H5 レイアウトを設計する場合、通常はバナーに遭遇することになります。例えば、2:1 で表示したい場...
目的: vuex で管理されている状態データを同時にローカルに保存できるようにします。独自のストレー...
場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...
Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...
現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...
目次システムアップデート構成Windows Update サーバーの変更自動更新を有効にして許可する...
1. MySQL 5.7 のアンインストール1.1查看yum是否安裝過mysql CD yum li...