Javascriptでシンプルなナビゲーションバーを実装
|
この記事では、参考までに、シンプルなナビゲーションバーを実装するためのJavascriptの具体的なコードを紹介します。具体的な内容は次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<title>ナビゲーション</title>
</head>
<スタイル>
ボタン{
幅:80ピクセル;
高さ:25px;
境界線:なし;
}
#b1{
背景画像: url('1.png');
右マージン:0px;
}
#b2{
背景画像: url('1.png');
幅:380ピクセル;
高さ:25px;
テキスト配置: 左;
}
#b1:ホバー{
背景画像: url('2.png');
}
#b2:ホバー{
背景画像: url('2.png');
}
</スタイル>
<本文>
<div style="width: 800px;margin:0px auto">
<div>
<img src="1.jpg" 幅="100%" 高さ="150px%">
</div>
<div>
<div style="font-size: 1px">
<button type="button" id="b1">ホームページ</button>
<button type="button" id="b1">ウェブサイトニュース</button>
<button type="button" id="b1">ウェブサイトの楽しみ</button>
<button type="button" id="b1">ウェブサイトフォーラム</button>
<button type="button" id="b1">ウェブサイトの紹介</button>
<button type="button" id="b2">人材を募集する</button>
</div>
</div>
</div>
</本文>
</html>効果画像:
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Mysql Workbench クエリ mysql データベース メソッド
>>: KTLツールはMySQLからMySQLへのデータの同期方法を実現します
推薦する
HTML テーブル マークアップ チュートリアル (15): テーブル タイトル
<br />このタグを使用すると、表のタイトルを直接追加し、タイトル テキストの配置プロ...
MySQL をインストールするときに初期パスワードを忘れた場合のシンプルで効果的な解決策
MySQL をインストールすると初期パスワードが与えられますが、この初期パスワードは大文字と小文字の...
JavaScript にはすでに Object があるのに、なぜ Map が必要なのでしょうか?
目次1. オブジェクトをマップとして扱わない1. 未定義のプロパティはプロトタイプチェーンを通じてア...
Dockerコンテナレイヤーの概念の詳細な説明
目次01 コンテナの一貫性02 レイヤーの概念03 レイヤードデザインの利点今日はコンテナ レイヤー...
HTMLでキーワードを強調表示するのに最適なソリューション
最近、プロジェクトに取り組んでいるときに、Web ページ上のキーワードを強調表示する機能に遭遇しまし...
MySQL 5.7 インストール MySQL サービスを開始できませんが、サービスはエラーを報告しません
MySQL 5.7 をインストールするには 2 つの方法があります。1 つはインストーラをダウンロー...
Windows での Tomcat サーバーのインストールに関するチュートリアル
1 ダウンロードして準備するまず、公式ウェブサイトからTomcatをダウンロードする必要があります。...
docker inspect コマンドの使用に関するヒント
説明と紹介Docker inspect は Docker クライアントのネイティブ コマンドであり、...
Mac に MySQL データベースをインストールし、環境変数を設定するためのグラフィック チュートリアル
目次MySQLをインストールする環境変数の設定MySQLをインストールするmysqlをダウンロードし...
MySQL マスタースレーブレプリケーションの原理と注意点
前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...
浮遊要素によって引き起こされる問題と解決策の詳細な説明
1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...
Linux QT Kit が見つからない、バージョンが空の問題の解決策
現在このような問題が発生しています 私の状況は、QT が動かなくなってしまったため、仮想マシンを再起...
ファイル共有サーバーを構築するための samba + OPENldap の詳細な説明
ここでは、samba (ファイル共有サービス) v4.9.1 + OPENldap (バックエンド ...
Linuxのip netnsコマンドを使用してネットワークポートを分離し、IPアドレスを設定します。
1. 分離マーカーを追加します。 ip netns add fd 2. 指定されたネットワーク カ...
Reactでファイルパスエイリアスを素早く設定する方法
React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。F...