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へのデータの同期方法を実現します
![MySQL データベース テーブルのパーティション分割に関する考慮事項 [推奨]](/upload/images/67caeb39a36ff.webp)
推薦する
html.cssオーバーフローの包括的な理解
html.cssオーバーフローの包括的な理解XML/HTML コードコンテンツをクリップボードにコピ...
Hタグの定義と注意事項について簡単に説明します
結果から判断すると、タイトルを定義するための固定パターンはなく、すべてむしろランダムな感じがします。...
MySQL は information_schema オブジェクトの付与をバイパスし、ERROR 1044 (4200) エラーを報告します
この質問は、MySQL の権限に関する WeChat グループのネットユーザー間の議論です。次のよう...
MySQLのユーザーアカウント管理と権限管理の詳細な説明
序文MySQL の権限テーブルは、データベースの起動時にメモリにロードされます。ユーザーが ID 認...
MySQL EXPLAIN出力列の詳細な説明
1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...
MySQL の int(n) の後の n はどういう意味ですか?
int(1) の長さ 1 は、許可されたストレージ幅を表していないことはすでにご存知かもしれません...
ドッカー専用倉庫港湾建設プロセス
1. 準備1.1 港ダウンロードハーバーダウンロードアドレス：リンクリンクの説明を追加し、必要なバー...
タイプライター効果を実現する純粋な js
この記事の例では、タイプライター効果を実現するためのjsの具体的なコードを参考までに共有しています。...
vue+elementui+vuex+sessionStorage を使用して履歴タグ メニューを実装するためのサンプル コード
一般的には、左側にメニューがあった後、ページの上部に履歴タブ メニューを追加する必要があります。他の...
モバイル端末の適応に関する簡単な説明
序文フロントエンド コードの記述では、「互換性」という言葉から逃れることはできません。過去の PC ...
JavaScript の for ループと二重 for ループの詳細な説明
forループfor ループは配列の要素をループします。文法： for (初期化変数; 条件式; 繰り...
JavaScript の基礎: 即時実行関数
目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...
Nginx の純粋な構成でリアルタイム ログ レポートを実現するためのアイデアと方法
目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...
WeChatミニプログラムはどのようにしてユーザー情報とユーザーの電話番号を同時に取得するのか
今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタ...
Vue でコンポーネントを一括インポート、登録、使用する方法
序文コンポーネントは、非常に頻繁に使用されるものです。多くの人は、コンポーネントを 1 つのファイル...