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操作を呼び出して実行する
まず、この投稿は Docker 初心者向けです。もちろん、ベテランであれば記事中の分割線以降の操作方...
Linux C ログ出力コード テンプレート サンプル コード
序文この記事は主に Linux C でのログ出力コード テンプレートに関する関連コンテンツを紹介し、...
VMware vCenter の不正な任意ファイルアップロードの脆弱性 (CVE-2021-21972) について
背景CVE-2021-21972 VMware vCenter における認証されていないコマンド実行...
CSS変数を使用して、クールで素晴らしいフローティング効果を実現します。
最近、Grover の Web サイトで楽しいホバー アニメーションを見つけ、自分自身のインスピレー...
きれいなJavaScriptコードの書き方を教える記事
目次1. 変数意味のある名前を使う不必要なコンテキストを追加しないようにするハードコードされた値を避...
Vue は小数点付きの星評価を実装します
この記事では、小数点付きの星評価を実装するためのVueの具体的なコードを参考までに共有します。具体的...
フォーム送信ページの更新がジャンプしない
1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
MySQL を暗号化および復号化するいくつかの方法 (要約)
目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...
MySQL の計画タスクとイベント スケジュール例の分析
この記事では、例を使用して、MySQL の計画されたタスクとイベントのスケジュールについて説明します...
CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴
前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...
nginx と openssl で https を実装する方法
サーバーデータがSSL証明書を使用して暗号化および認証されていない場合、ユーザーのデータはプレーンテ...
Jenkinsはマイクロサービスをパッケージ化してDockerイメージを構築し、実行します。
目次環境の準備始める1. GitLabリモートリポジトリがマイクロサービスプロジェクトを作成する2....
Vueはログインタイプの切り替えを実装します
この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...
純粋なJSを使用してセカンダリメニュー効果を実現します
この記事の例では、セカンダリメニュー効果を実現するためのJSの具体的なコードを参考までに共有していま...
Linuxでプロセスが占有するポート番号を表示する
Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...