1. CSSナビゲーションバー (1)ナビゲーションバーの機能 ナビゲーション バーを使いこなすことは、Web サイトのレイアウトにとって非常に重要です。CSS を使用すると、退屈な HTML メニューではなく、見栄えの良いナビゲーション バーに変換できます。 (2)垂直ナビゲーションバー <1>コードは次のとおりです <!doctypehtml> <html> <ヘッド> <メタ文字セット="utf-8"> <title>垂直ナビゲーションバー</title> <link rel="スタイルシート" href="daohanglan1.css"/> </head> <本文> <ul> <li><a class="active" href="#home">ホーム</a></li> <li><a href="#news">ニュース</a></li> <li><a href="#contact">お問い合わせ</a></li> <li><a href="#about">概要</a></li> </ul> <div> <h2>垂直ナビゲーションバー</h2> <h3>垂直ナビゲーション バー 垂直ナビゲーション バー 垂直ナビゲーション バー 垂直ナビゲーション バー 垂直ナビゲーション バー 垂直ナビゲーション バー 垂直ナビゲーション バー</p> <p>垂直ナビゲーション バー</p> <p>垂直ナビゲーションバー</p> <p>垂直ナビゲーションバー</p> <p>垂直ナビゲーション バー</p> <p>垂直ナビゲーション バー</p> <p>垂直ナビゲーション バー</p> <p>垂直ナビゲーション バー</p> </div> </本文> </html> 体{ マージン:0; } ul{ パディング:0; マージン:0; リストスタイルタイプ:なし; 幅:25%; 背景色:#f1f1f1; 位置:固定; 高さ:100%; トップ:0; オーバーフロー:自動; /* 境界線:1px 実線 #000; */ } /* ul>li:not(:最後の子){ ボーダー下部:1px 実線 #000; } */ ul a{ 表示:ブロック; テキスト装飾:なし; 色:#000; パディング:8px 16px; テキスト配置:中央; } li a:hover:not(.active){ 背景色:#555; 色:白; } a.アクティブ{ 背景色:#4caf50; 色:白; } div{ 左マージン:25%; パディング:1px 16px; 高さ:100px; } <2>効果図は以下のとおりです。 (3)水平ナビゲーションバー <1>コードは次のとおりです。 <!doctypehtml> <html> <ヘッド> <メタ文字セット="utf-8"> <title>水平ナビゲーション バー</title> <link rel="スタイルシート" href="daohanglan2.css"/> </head> <本文> <ul> <li><a class="active" href="#home">ホーム</a></li> <li><a href="#news">ニュース</a></li> <li><a href="#contact">お問い合わせ</a></li> <li style="float:right"><a href="#about">概要</a></li> </ul> <div class="box"> <h2>水平ナビゲーション バー</h2> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p> </div> </本文> </html> 体{ マージン:0; } ul{ パディング:0px; マージン:0px; リストスタイルタイプ:なし; 背景色:#333; オーバーフロー:非表示; 位置:固定; 上:0px; 幅:100%; } ul>li{ フロート:左; 右境界線:1px 実線 #fff; 表示:インライン; } ul>li:最後の子{ 右境界線:なし; } { パディング:14px 16px; 表示:ブロック; 幅:60ピクセル; テキスト配置:中央; テキスト装飾:なし; 色:白; } li a:hover:not(.active) { 背景色: #111; } li a.アクティブ{ 色: 白; 背景色: #4CAF50; } .box{パディング:20px; 上マージン:30px; 背景色:#1abc9c; 高さ:1500px;} <2>効果図は以下のとおりです。 2. ドロップダウンメニュー (1)ドロップダウンメニューの機能 ドロップダウン メニューを使用すると、Web ページが退屈にならないようになります。また、Web ページの組版に欠かせない CSS を通じて、Web ページの外観を変更することもできます。 (2)ドロップダウンメニュー <1>コードは次のとおりです。 <!doctypehtml> <html> <ヘッド> <メタ文字セット="utf-8"/> <タイトル></タイトル> <link rel="スタイルシート" type="text/css" href="xialacaidan.css"/> </head> <本文> <div class="dropdown"> <span> ドロップダウンメニュー <div class="di"> <ul> <li>こんにちは! </li> <li>大丈夫ですよ! </li> <li>みなさんこんにちは! </li> </ul> </div> </div> </本文> </html> 体{ マージン:0; テキスト配置:中央; } 。落ちる{ 背景色:緑; テキスト配置:中央; パディング:20px; 表示:インラインブロック; カーソル:ポインタ; 位置:相対; } .di{ 表示:なし; 位置:絶対; 上:61px; 左:0; } .di ul{ リストスタイル:なし; パディング:0; マージン:0; 背景色: #f9f9f9; ボックスの影: 0px 8px 16px 0px rgba(0,0,0,0.2); } .di ul li{ 最小幅:104px; パディング:10px 15px; } .dropdown:hover{ 背景色:#3e8e41 } .dropdown:hover .di{ 表示:ブロック; } .di ul li:hover{ 背景色: #f1f1f1 } <2>効果図は次の通りです 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: W3C チュートリアル (11): W3C DOM アクティビティ
序文ご存知のとおり、ブラウザの相同性戦略とクロスドメイン方式も、フロントエンド面接で頻繁に遭遇する問...
まずSQLを書く SELECT DISTINCT from_id タラから cod.from_id ...
ここ数年、Web デザインには「全幅背景と固定幅コンテンツ」というトレンドが生まれています。このデザ...
目次非同期を理解するフェッチ(url)レスポンス.json() asyncとawaitを組み合わせる...
mysql が誤ってデータを削除しました削除ステートメントを使用して誤ってデータ行を削除する誤ってデ...
この記事は主にDockerでパラメータ変数を外部から指定する方法を紹介します。この記事のサンプルコー...
この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する方法に関する3番目の記事...
現在、WeChatパブリックアカウントの運用活動が多く、写真を生成する必要があります。生成された写真...
この記事ではクラスタの展開に関連する内容は紹介しませんバージョン制約Docker エンジン >...
情報を探すインターネットで見つかったいくつかの方法: autocomplete="off&...
目次1. 複数の .catch 2. 複数の .catch 3. .then と .catch の連...
1. Busyboxのソースコードをオンラインでダウンロードしてください。コンパイル方法については、...
この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...
ダイアログをクロージャで使用し、右上隅の向こう側に閉じるボタンがあるダイアログを描画しました。ボタン...
目次defineComponent オーバーロード関数開発実務defineComponent 関数は...