メニューバーの例 1: コードをコピーしますコードは次のとおりです: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"><スクリプトtype="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> $(function() { $("#container .menu1 ul li").click(function() { varindex = $("#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(); }) }) <br>body<br>{<br>margin: 0;<br>padding: 0;<br>font-family: "宋体";<br>font-size: 9pt;<br>color: #FFFFFF;<br>フォントの太さ: 太字;<br>}<br>#container<br>{<br>幅: 100%; /* 1200ピクセル; */<br>高さ: auto;<br>マージン: 0 auto;<br>/* ボーダー: 1px #1025c0 ソリッド; */<br>/* シュガン 2011.10.19 */<br>/* マージン: 0; */<br>パディング: 0px;<br>フォントファミリー: "宋体";<br>フォントサイズ: 9pt;<br>色: #FFFFFF;<br>フォントの重さ: 太字;<br>} <br>#container .menu1<br>{<br>幅: 684px;<br>高さ: 34px;<br>枠線: なし;<br>背景: url(/images/cnblogs_com/xugang/sadasd_09.png) no-repeat;<br>/*background: url(<a href="http://www.webdm.cn/images/20101213/2/menu1.gif">http://www.webdm.cn /images/20101213/2/menu1.gif</a>) no-repeat;<br>background-color: #1B5582;*/<br>}<br>#container .menu1 ul<br>{<br>マージン: 0;<br>/* パディング: 0; */<br>パディング左: 0px;<br>パディング右: 0px;<br>パディングボトム: 0px;<br>パディングトップ: 4px;<br>位置: 相対;<br>マージン-左: 4px; /* xugang 一级菜 单选择项样式 */<br>}<br>#container .menu1 ul li<br>{ /*border: 1px #1025c0 Solid; 测试 */<br>float: left;<br>height: 25px;<br>width: 110px;<br>line-height: 25px;<br>list-style: none;<br>text-align: center ;<br>カーソル: ポインタ;<br>/* カラー: #fffff; */<br>パディング左: 2px; /* xugang 一级菜单选择项 */<br>/* margin-left: 1px; xugang 一级菜单选择项 簡単に一级菜单動态向右移動 */<br>}<br>#container .menu2<br>{<br>width: 100%; /* 1000ピクセル; */<br>高さ: 25px;<br>ボーダー: なし;<br>色: #000000;<br>フォントの太さ: 通常;<br>背景色: #C9DEFA; /* #DFF0FF 子菜单颜色 */<br>padding-left: 0px; /* xugang */<br>padding-top: 0px; /* xugang */<br>margin-left: 0px; /* xugang */<br>}<br>#container .menu2 ul<br>{<br>margin: 0; /* xugang の最初のマージン: 0; */<br>パディング: 0;<br>}<br>#container .menu2 ul li<br>{<br>高さ: 30px;<br>行の高さ: 30px;<br>リスト スタイル: なし;<br>float: left;<br>cursor: pointer;<br>}<br>#container .menu2 ul li ul li<br>{ /* border: 1px #1025c0 Solid; 测试 */<br>float: left;<br>padding-top: 0px;<br>padding-bottom: 0px;<br>padding-left: 40px;<br>padding-right: 30px; /* xugang */<br>height: 25px;<br>line-height: 25px;<br>list-style: none;<br>}<br>.bg<br>{<br>font-size: 12pt;<br>/* フォントの太さ: 通常;*/<br>/* テキスト装飾: 下線;点滅 */<br>背景色: #1B5582; /* #1B5582 一级菜单选择项 背景 */<br>}<br>.hide<br>{<br>display: none;<br>}<br>.menu_a1{ display: block;色:#ffffff;テキスト装飾:なし!重要; }<br>.menu_a2{ 表示: ブロック;色:#000000;テキスト装飾:なし!重要; }<br> 第一栏第二栏第三栏第四栏< /li>第五栏第六栏 第一栏第一栏第一栏第二栏< /li> 第三栏第三栏第三栏第四栏< /li> 第五栏第五栏第五栏第六栏< /li> 第六栏/li>gt; 第六栏 ; 菜单栏例二：复制代代码如下: 黄页地区列表<br> body {background:#ccc;color:#000;font: Normal Normal Normal 12px/180% Tahoma, Arial, Helvetica, sans-serif, "宋体";text-align:center;}<br>.nav {position:相対;背景: url(/images/cnblogs_com/xugag/nav_bg.png) 繰り返しなし 0 -36px;幅:960px;高さ:36px;}<br>.naviner {背景: url(/images/cnblogs_com/xugag/ nav_bg.png) 繰り返しなし 100% -72px;}<br>.navlist {高さ: 36px;行の高さ: 36px;オーバーフロー: 非表示;マージン: 0 10px;背景: url(/images/cnblogs_com/xugang/nav_bg .png)repeat-x 0 0;}<br>.nav li {float: left;display: inline;margin: 0 0 0 -2px;padding: 0 4px 0 6px;background: url(/images/cnblogs_com/xugag) /nav_bg.png) no-repeat 0 -108px;}<br>.nav a {display: block;width: 102px;text-align: center;font-size: 120%; text-decoration:none;}<br>.nav a:link、.nav a:visited {color: #fff;text-decoration:none;}<br>.nav a:hover、.nav a:active {color : #fff;フォントの太さ: ボールド;背景: url(/images/cnblogs_com/xugag/nav_bg.png) リピートなし 50% -144px;テキスト装飾:なし;}<br>http://www.jb51.net/" title="首页">首页http://www.jb51.net/cat.html" title="分类列表" rel="nofollow">分类列表http://www.jb51.net/loc.html" title="地区列表" rel="nofollow">地区列表http://www.jb51.net/trade.html" title="供求商机" rel="nofollow">供求商机http://www.jb51.net/news.html" title="行业新闻" rel="nofollow">行业新闻http://www.jb51.net/submit.html" title="提交計画业" rel="nofollow">提交計画业http://www.jb51.net/join.html" title="発行商機" rel="nofollow">発行商機http://www.jb51.net/find.html" title="高级搜索" rel="nofollow">高级搜索
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
