DIV+CSS実践操作6：経済経営学部Webページにナビゲーションバーのドロップダウンメニューを追加_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

DIV+CSS実践操作6：経済経営学部Webページにナビゲーションバーのドロップダウンメニューを追加_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

很

実は、私はずっと前からこの機能を実現したいと思っていましたが、朝、先生が言った簡単な JS ドロップダウンメニューの知識を調べ始めました。基本的なことですが、まだ理解していませんでした。その後、インターネットでチュートリアルとコード例を探したところ、私が書いたものと似ていることがわかりました。これは大きな違いで、私は最近 JS を詳しく勉強していますが、これをまだ学んでいません。これを学べば、より簡潔なドロップダウンメニューのコードを書くことができると思います。私は JS についてあまり詳しくないので、

のほとんどは依然として CSS を使用して実装されています。

このシリーズを続けて、経済管理学部 Web サイトの機能構築を完了します。今回は、ナビゲーションバーにドロップダウンメニューを追加します。 CSSコードがたくさんありますが、安全のため

をここに貼り付けます。これは、読むのが面倒な問題を解決するために、各CSSコードの内容をブロックに分割し、以前の変更もマークされます。

コメント付き。代 l HTML コード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>经管系</title><link rel="stylesheet" href="Style.css" type="text/css" /><script type="text/javascript" src="myScript.js"></script></head><body><!--经管系Logo板块--><div id="top">Dreamweaver8</div><!--经管系网页导航栏板块--><div id="nav">    <ul><!--无序列表-->		<li onmouseover="showmenu('bzsy')" onmouseout="hidemenu('bzsy')"><a href="#">本站首页</a>		    <ul id="bzsy">			   <li><a href="#">学校首页</a></li>			</ul>		</li>			<li onmouseover="showmenu('bxgk')" onmouseout="hidemenu('bxgk')"><a href="#">本系概况</a>		    <ul id="bxgk">			    <li><a href="#">系情概览</a></li>				<li><a href="#">机构设置</a></li>				<li><a href="#">领导班子</a></li>				<li><a href="#">师资力量</a></li>			</ul>		</li>		<li onmouseover="showmenu('jyjx')" onmouseout="hidemenu('jyjx')"><a href="#">教育教学</a>		    <ul id="jyjx">			    <li><a href="#">培养方案</a></li>				<li><a href="#">课程建设</a></li>				<li><a href="#">实践教学</a></li>				<li><a href="#">毕业论文</a></li>				<li><a href="#">各班课表</a></li>				<li><a href="#">管理制度</a></li>			</ul>		</li>		<li onmouseover="showmenu('kxyj')" onmouseout="hidemenu('kxyj')"><a href="#">科学研究</a>		    <ul id="kxyj">			    <li><a href="#">科研成果</a></li>				<li><a href="#">文献资料</a></li>				<li><a href="#">学术报告</a></li>			</ul>		</li>		<li onmouseover="showmenu('xsgz')" onmouseout="hidemenu('xsgz')"><a href="#">学生工作</a>		    <ul id="xsgz">			    <li><a href="#">工作动态</a></li>				<li><a href="#">新生导向</a></li>				<li><a href="#">学生社团</a></li>				<li><a href="#">学子风采</a></li>				<li><a href="#">管理制度</a></li>			</ul>		</li>		<li onmouseover="showmenu('zsjy')" onmouseout="hidemenu('zsjy')"><a href="#">招生就业</a>		    <ul id="zsjy">			    <li><a href="#">专业介绍</a></li>				<li><a href="#">招生计划</a></li>				<li><a href="#">就业工作</a></li>				<li><a href="#">招聘信息</a></li>				<li><a href="#">求职指导</a></li>				<li><a href="#">就业精英</a></li>			</ul>		</li>		<li onmouseover="showmenu('dtjs')" onmouseout="hidemenu('dtjs')"><a href="#">党团建设</a>		     <ul id="dtjs">			    <li><a href="#">组织机构</a></li>				<li><a href="#">入党指南</a></li>				<li><a href="#">创先争优</a></li>			</ul>		</li>		<li onmouseover="showmenu('kysb')" onmouseout="hidemenu('kysb')"><a href="#">考研升本</a>		    <ul id="kysb">			    <li><a href="#">考研专题</a></li>				<li><a href="#">专科接本</a></li>			</ul>		</li>		<li onmouseover="showmenu('sxjd')" onmouseout="hidemenu('sxjd')"><a href="#">实习基地</a>		    <ul id="sxjd">			    <li><a href="#">物流管理</a></li>				<li><a href="#">社会工作</a></li>				<li><a href="#">保险专业</a></li>				<li><a href="#">商务管理</a></li>				<li><a href="#">实习动态</a></li>			</ul>  		</li>		<li><a href="#">经管动态</a></li>		<li><a href="#">通知公告</a></li>	</ul></div><!--经管系网页风采展示广告板块--><div id="adpic"></div><!--经管系内容板块--><div id="news">    <div id="news_left">	    <div id="news_left_top">		    <div class="news_left_titlebar"><img src="images/n_icon001.gif" />常用服务</div>			<div id="news_left_top_content">			     <ul>				      <li><a href="#">唐山师范学院校历查询</a></li>					  <li><a href="#">课程表查询</a></li>					  <li><a href="#">期末成绩录入与查询</a></li>					  <li><a href="#">论文检索[CNKI，万方，读秀]</a></li>					  <li><a href="#">毕业论文格式及相关表格</a></li>					  <li><a href="#">常用下载</a></li>					  <li><a href="#">电子资源</a></li>				 </ul>			</div>		</div>		<div id="news_left_mid">		    <div class="news_left_titlebar"><img src="images/n_icon001.gif" />站内导航</div>			<div id="news_left_mid_content">			    <table>				       <tr>					       <td><a href="#">专业介绍</a></td>						   <td><a href="#">新生向导</a></td>					   </tr>					   <tr>					       <td><a href="#">教授风采</a></td>						   <td><a href="#">学生社团</a></td>					   </tr>					   <tr>					       <td><a href="#">课程建设</a></td>						   <td><a href="#">学子风采</a></td>					   </tr>					   <tr>					       <td><a href="#">实践教学</a></td>						   <td><a href="#">招聘信息</a></td>					   </tr>					   <tr>					       <td><a href="#">实习动态</a></td>						   <td><a href="#">求职指导</td>					   </tr>					   <tr>					       <td><a href="#">学术活动</a></td>						   <td><a href="#">就业精英</td>					   </tr>					   <tr>					       <td><a href="#">科研成果</a></td>						   <td><a href="#">考研专题</a></td>					   </tr>				</table>			</div>		</div>		<div id="news_left_bottom">		    <div class="news_left_titlebar"><img src="images/n_icon001.gif" />扫一扫</div>			<div id="news_left_bottom_content">			    <a href="#"><img src="images/ewm.png" width="233" height="200" border="0" /></a> <!--二维码图片-->			</div>		</div>	</div>    <div id="news_mid">	    <div id="news_mid_top">		    <div class="news_mid_titlebar">经管动态</div>			<div id="news_mid_top_content">			    <div id="news_mid_top_content1">图片动态无缝滚动需要JS实现，我们后续加上</div>				<div id="news_mid_top_content2">				    <ul>				        <li><img src="images/arrow.gif" /><a href="#" title="博弈思维与竞争策略 --北京外国语大学">博弈思维与竞争策略 --北京外国语大学</a></li>					    <li><img src="images/arrow.gif" /><a href="#" title="经济管理系“四进四信”主题团日活动">经济管理系“四进四信”主题团日活动</a></li>					    <li><img src="images/arrow.gif" /><a href="#" title="经济管理系2015级专接本新生顺利开学">经济管理系2015级专接本新生顺利开学</a></li>					    <li><img src="images/arrow.gif" /><a href="#" title="经济管理系与合作企业开展实习工作经验交流">经济管理系与合作企业开展实习工作经验交流</a></li>					    <li><img src="images/arrow.gif" /><a href="#" title="荣盛集团举办“企业精英对话高校学子”高校巡讲活动">荣盛集团举办“企业精英对话高校学子”高校巡讲活动</a></li>					    <li><img src="images/arrow.gif" /><a href="#" title="经济管理系第七届社工文化节开幕">经济管理系第七届社工文化节开幕</a></li>					    <li><img src="images/arrow.gif" /><a href="#" title="唐山师院经管系学生开展服务高考志愿者活动">唐山师院经管系学生开展服务高考志愿者活动</a></li>					    <li><img src="images/arrow.gif" /><a href="#" title="2011级2015届社会工作专业考研光荣榜">2011级2015届社会工作专业考研光荣榜</a></li>				    </ul>    				</div>			</div>		</div>		<div id="news_mid_bottom">		    <div class="news_mid_titlebar">通知公告</div>			<div id="news_mid_bottom_content">			    <ul>				    <li><img src="images/arrow.gif" /><a href="#" title="经管系2016届论文最新文件(试用于2012级本科)">经管系2016届论文最新文件(试用于2012级本科)</a></li>					<li><img src="images/arrow.gif" /><a href="#" title="2011级2015届本科论文安排(修订)">2011级2015届本科论文安排(修订)</a></li>					<li><img src="images/arrow.gif" /><a href="#" title="我系生活部宿舍卫生检查通报">我系生活部宿舍卫生检查通报</a></li>					<li><img src="images/arrow.gif" /><a href="#" title="经管系2011级本科毕业论文教学工作安排">经管系2011级本科毕业论文教学工作安排</a></li>					<li><img src="images/arrow.gif" /><a href="#" title="经管系首问负责制">经管系首问负责制</a></li>					<li><img src="images/arrow.gif" /><a href="#" title="2014暑假社会实践先进个人">2014暑假社会实践先进个人</a></li>					<li><img src="images/arrow.gif" /><a href="#" title="社会工作专业历届考研人数统计(2011-2014)">社会工作专业历届考研人数统计(2011-2014)</a></li>					<li><img src="images/arrow.gif" /><a href="#" title="经济管理系2013年度系务公开">经济管理系2013年度系务公开</a></li>			    </ul> 			</div>		</div>	</div>	<div id="news_right">	    <div id="news_right_top">		    <div class="news_right_titlebar">招生就业</div>			<div id="news_right_top_content">			    <ul>				    <li><a href="#" title="2015年招生计划">2015年招生计划</a></li>					<li><a href="#" title="长城汽车招聘">长城汽车招聘</a></li>					<li><a href="#" title="河北港口集团">河北港口集团</a></li>					<li><a href="#" title="链家地产招聘会">链家地产招聘会</a></li>					<li><a href="#" title="北京瑞亚启明教育简章">北京瑞亚启明教育简章</a></li>					<li><a href="#" title="天津诺航佳运国际货运代理有限公司">天津诺航佳运国际货运代理有限公司</a></li>					<li><a href="#" title="春暖社工服务中心2015年4月急聘">春暖社工服务中心2015年4月急聘</a></li>					<li><a href="#" title="唐山君元科技有限责任公司招聘信息">唐山君元科技有限责任公司招聘信息</a></li>					<li><a href="#" title="国企招聘信息汇总">国企招聘信息汇总</a></li>				</ul>			</div>		</div>		<div id="news_right_mid">		    <div class="news_right_titlebar">实习基地</div>			<div id="news_right_mid_content">			     <div id="news_right_mid_content1">			        <ul>				      <li><a href="#" title="端正实习态度，明确实习目的">端正实习态度，明确实习目的</a></li>					  <li><a href="#" title="我系10社工专业学生赴深圳毕业实习顺利进行">我系10社工专业学生赴深圳毕业实习顺利进行</a></li>					  <li><a href="#" title="总结经验 巩固成果 扎实推进 实践教学工作">总结经验 巩固成果 扎实推进 实践教学工作</a></li>					  <li><a href="#" title="11级物流专接本班上海全家实习总结">11级物流专接本班上海全家实习总结</a></li>				    </ul>				 </div>				</div>		</div>		<div id="news_right_bottom">		     <div class="news_right_titlebar">学生工作</div>			 <div id="news_right_bottom_content">			      <ul>			          <li><a href="#" title="唐山师院经管系学生开展服务高考志愿活动">唐山师院经管系学生开展服务高考志愿活动</a></li>					  <li><a href="#" title="宿舍文化建设倡议">宿舍文化建设倡议</a></li>					  <li><a href="#" title="热烈祝贺经管系取得佳绩">热烈祝贺经管系取得佳绩</a></li>					  <li><a href="#" title="灰姑娘舞会">灰姑娘舞会</a></li>					  <li><a href="#" title="经济管理系举行升旗仪式">经济管理系举行升旗仪式</a></li>					  <li><a href="#" title="经管系考研交流大会">经管系考研交流大会</a></li>					  <li><a href="#" title="书香浸润校园-好书推荐活动开始了">书香浸润校园-好书推荐活动开始了</a></li>					  <li><a href="#" title="宿舍风采大赛">宿舍风采大赛</a></li>				  </ul>			 </div>		</div>	</div></div><!--经管系网站友情链接板块--><div id="link">    <div id="link_left">友情链接：</div>	<div id="link_right">		<table width="100%" border="0" cellspacing="0" cellpadding="0"><!--表格-->		      <tr align="center" valign="middle">			      <td><a href="#">教学资源网</a></td>			      <td>|</td>			      <td><a href="#">中国大学</a></td>			      <td>|</td>			      <td><a href="#">教育部</a></td>			      <td>|</td>			      <td><a href="#">河北省教育厅</a></td>			      <td>|</td>			      <td><a href="#">中国教育科研网</a></td>			      <td>|</td>			      <td><a href="#">教育网河北主节点</a></td>			      <td>|</td>			      <td><a href="#">慕课网</a></td>			      <td>|</td>			      <td><a href="#">爱课程</a></td>			      <td>|</td>			      <td><a href="#">南方周末</a></td>				  <td>|</td>			      <td><a href="#">经济观察</a></td>				  <td>|</td>			      <td><a href="#">中国企业家</a></td>		       </tr>	    </table>	</div></div><!--经管系网站制作版权信息板块--><div id="copyright">    <div id="copyright_top"><a href="#">版权所有：</a></div>	<div id="copyright_bottom"><a href="#">所在地址：</a></div></div></body></html>

ログイン後にコピー

E CSS コード:

🎜🎜🎜🎜 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7554

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

＆lt; Progress＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; datalist＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; meter＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？ Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？ Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles