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へのデータの同期方法を実現します
推薦する
Dockerコンテナの状態変換の実装
Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...
Docker 実行時にユーザーとグループを管理する方法
Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...
一般的なブラウザ互換性の問題（概要）
ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...
シンプルなショッピングフォームを実装するJavaScript
この記事では、簡単なショッピングフォームを実装するためのJavaScriptの具体的なコードを参考ま...
HTML の大なり、小なり、スペース、引用符などでよく使用されるエスケープ コードのリスト。
表は以下のとおりです。 HTMLソースコード結果を表示説明する< <未満記号また...
MySQL Community Server 圧縮パッケージのインストールと設定方法
今日は、MySQL をインストールしたかったので、公式 Web サイトにアクセスして、MySQL の...
CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)
オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...
Webデザインチュートリアル（8）：Webページの階層と空間デザイン
<br />前回の記事：Webデザイン講座（７）：Webページ制作の効率化１：必要な小言...
ウェブページのコメントにより IE でテキストがオーバーフローする
実験コードは次のとおりです。 </head> <body> <div ...
WebpackはCSSファイルを読み込み、その設定方法
webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...
Linux環境でIPV6接続をサポートするようにmysql5.6を設定する方法
導入：この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...
mysql 実行プラン ID が空である (UNION キーワード) の詳細な説明
導入作業プロセス中に、遅いクエリが調整されることがあります。 MySQL SQL ステートメントのチ...
HTML5+CSS3 ヘッダー作成例と更新
前回、私たちは 2 つのヘッダー レイアウト (フレックスボックス 1 つとフロート 1 つ) を考...
MySQL 8.0.17 のインストールと使用方法のチュートリアル図
前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...
いくつかの面接の質問を使ってJavaScriptの実行メカニズムを調べる
目次前の単語同期と非同期前菜プレートを追加マクロタスク マイクロタスク約束しましょうタイマーを追加す...