メニューバーの例 1: コードをコピー コードは次のとおりです。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <ヘッド> <script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script</a> type="text/javascript"> $(関数() { $("#container .menu1 ul li").click(function() { var index = $("#container .menu1 ul li").index(this); $(this).addClass("bg").siblings().removeClass(); $("#container .menu2 ul li ul").eq(index).show().parent().siblings("li").children("ul").hide(); }) }) </script><style type="text/css"> 体 { マージン: 0; パディング: 0; フォントファミリー: "宋体"; フォントサイズ: 9pt; 色: #FFFFFF; フォントの太さ: 太字; } #容器 { 幅: 100%; /* 1200px; */ 高さ: 自動; マージン: 0 自動; /* 境界線: 1px #1025c0 実線; */ /* xugang 2011.10.19 */ /* マージン: 0; */ パディング: 0px; フォントファミリー: "宋体"; フォントサイズ: 9pt; 色: #FFFFFF; フォントの太さ: 太字; } #コンテナ.menu1 { 幅: 684ピクセル; 高さ: 34px; 境界線: なし; 背景: url(/images/cnblogs_com/xugang/sadasd_09.png) 繰り返しなし; /*背景: url(<a href="http://www.webdm.cn/images/20101213/2/menu1.gif">http://www.webdm.cn/images/20101213/2/menu1.gif</a>) 繰り返しなし; 背景色: #1B5582;*/ } #コンテナ .menu1 ul { マージン: 0; /* パディング: 0; */ 左パディング: 0px; 右パディング: 0px; パディング下部: 0px; パディング上部: 4px; 位置: 相対的; margin-left: 4px; /* xugang 第一レベルメニュー選択項目スタイル*/ } #コンテナ .menu1 ul li { /*境界線: 1px #1025c0 solid; テスト*/ フロート: 左; 高さ: 25px; 幅: 110ピクセル; 行の高さ: 25px; リストスタイル: なし; テキスト配置: 中央; カーソル: ポインタ; /* 色: #fffff; */ padding-left: 2px; /* xugang 第一レベルのメニュー選択項目 */ /* margin-left: 1px; xugang 第一レベルのメニュー選択項目は、第一レベルのメニューを動的に右に移動させることが簡単にできます*/ } #コンテナ.menu2 { 幅: 100%; /* 1000px; */ 高さ: 25px; 境界線: なし; 色: #000000; フォントの太さ: 標準; background-color: #C9DEFA; /* #DFF0FF サブメニューの色*/ padding-left: 0px; /* 余白 */ padding-top: 0px; /* xugang */ margin-left: 0px; /* 余白 */ } #コンテナ .menu2 ul { margin: 0; /* xugang オリジナル margin: 0; */ パディング: 0; } #コンテナ .menu2 ul li { 高さ: 30px; 行の高さ: 30px; リストスタイル: なし; フロート: 左; カーソル: ポインタ; } #コンテナ .menu2 ul li ul li { /* 境界線: 1px #1025c0 solid; テスト*/ フロート: 左; パディング上部: 0px; パディング下部: 0px; 左パディング: 40px; パディング右: 30px; /* xugang */ 高さ: 25px; 行の高さ: 25px; リストスタイル: なし; } .bg { フォントサイズ: 12pt; /* フォントの太さ: 通常;*/ /* テキスト装飾: 下線、点滅 */ background-color: #1B5582; /* #1B5582 第一レベルのメニュー選択の背景*/ } 。隠れる { 表示: なし; } .menu_a1{ display: block; color:#ffffff; text-decoration:none !important; } .menu_a2{ display: block; color:#000000; text-decoration:none !important; } </スタイル> </head> <本文> <div id="コンテナ"> <div class="menu1"> <ul> <li class="bg"><a href="#" class="menu_a1">最初の列</a></li> <li><a href="#" class="menu_a1">2 列目</a></li> <li><a href="#" class="menu_a1">3 列目</a></li> <li><a href="#" class="menu_a1">4 列目</a></li> <li><a href="#" class="menu_a1">5 列目</a></li> <li><a href="#" class="menu_a1">第 6 列</a></li> </ul> </div> <div class="menu2"> <ul> <li> <ul> <li><a href="#" class="menu_a2">最初の列</a></li> <li><a href="#" class="menu_a2">最初の列</a></li> <li><a href="#" class="menu_a2">最初の列</a></li> </ul> </li> <li> <ul class="hide"> <li>2 列目</li><li>2 列目</li><li>2 列目</li> </ul> </li> <li> <ul class="hide"> <li>3 列目</li><li>3 列目</li><li>3 列目</li> </ul> </li> <li> <ul class="hide"> <li>4 列目</li><li>4 列目</li><li>4 列目</li> </ul> </li> <li> <ul class="hide"> <li>5 列目</li><li>5 列目</li><li>5 列目</li> </ul> </li> <li> <ul class="hide"> <li>6 列目</li><li>6 列目</li><li>6 列目</li> </ul> </li> </ul> </div> </div> <div スタイル="幅:400px; 高さ:300px; 背景色:赤;"></div> </本文> </html>
コードをコピー コードは次のとおりです。<html> <ヘッド> <title>イエローページ地域リスト</title> <スタイル タイプ="text/css"> body {background:#ccc;color:#000;font: normal normal normal 12px/180% Tahoma、Arial、Helvetica、sans-serif、「宋体」;text-align:center;} .nav {位置: 相対;背景: url(/images/cnblogs_com/xugang/nav_bg.png) 繰り返しなし 0 -36px;幅:960px;高さ:36px;} .navinner {背景: url(/images/cnblogs_com/xugang/nav_bg.png) 繰り返しなし 100% -72px;} .navlist {高さ: 36px;行の高さ: 36px;オーバーフロー: 非表示;マージン: 0 10px;背景: url(/images/cnblogs_com/xugang/nav_bg.png) repeat-x 0 0;} .nav li {float: left;display: inline;margin: 0 0 0 -2px;padding: 0 4px 0 6px;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -108px;} .nav a {display: block;width: 102px;text-align: center;font-size: 120%; text-decoration:none;} .nav a:link、.nav a:visited {color: #fff;text-decoration:none;} .nav a:hover、.nav a:active {color: #fff;font-weight: bold;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 50% -144px;text-decoration:none;} </スタイル> </head> <本文> <div class="nav"> <div class="navinner"> <ul class="navlist"> <li><a href="https://www.jb51.net/">https://www.jb51.net/</a>" title="ホーム">ホーム</a></li> <li><a href="<a href="https://www.jb51.net/cat.html">https://www.jb51.net/cat.html</a>" title="カテゴリー一覧" rel="nofollow">カテゴリー一覧</a></li> <li><a href="<a href="https://www.jb51.net/loc.html">https://www.jb51.net/loc.html</a>" title="地域リスト" rel="nofollow">地域リスト</a></li> <li><a href="<a href="https://www.jb51.net/trade.html">https://www.jb51.net/trade.html</a>" title="需要と供給の機会" rel="nofollow">需要と供給の機会</a></li> <li><a href="<a href="https://www.jb51.net/news.html">https://www.jb51.net/news.html</a>" title="業界ニュース" rel="nofollow">業界ニュース</a></li> <li><a href="<a href="https://www.jb51.net/submit.html">https://www.jb51.net/submit.html</a>" title="企業を送信" rel="nofollow">企業を送信</a></li> <li><a href="<a href="https://www.jb51.net/join.html">https://www.jb51.net/join.html</a>" title="ビジネスチャンスを公開する" rel="nofollow">ビジネスチャンスを公開する</a></li> <li><a href="<a href="https://www.jb51.net/find.html">https://www.jb51.net/find.html</a>" title="詳細検索" rel="nofollow">詳細検索</a></li> </ul> </div> </div> </本文> </html> |
<<: CSSペイントAPIを使用して、解像度に依存しない可変背景効果を動的に作成します。
>>: 優れたグラフィックデザイナーが習得すべき7つのスキル
目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...
バグ図のように、削除文とパラメータをデータベースにコピーして実行し、2つのデータを削除しようとしたの...
1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...
Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...
プロジェクトで発生した不規則な絵画壁のレイアウト問題は、次のように分析されます。 1.img dis...
平行ボックスの余白 (二重余白の重なり) に関する面接の質問: 1 つのボックスに上余白があり、もう...
おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...
仮想マシンはホストマシンにインストールされます。 CPU とメモリはホスト マシンと共有する必要があ...
1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...
スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...
この記事の例では、両端キューを実装するためのJavaScriptの具体的なコードを参考までに共有して...
まず、setIntervalはフックとしてカプセル化されます👇 'react' から...
目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...
リスト形式のテキストの展開と折りたたみの実装は参考までに。具体的な内容は以下のとおりです。必要: 1...
1. 公式サイトを参照してdockerをインストールする2. MySQLイメージをプルします(デフォ...