ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLにセカンダリタブを実装する方法
HTMLにセカンダリタブを実装する方法
- coldplay.xixiオリジナル
- 2021-02-20 11:09:286042ブラウズ
html セカンダリ タブを実装する方法: まず、Web ページ コードを記述するソフトウェアを開き、新しい HTML Web ページ ファイルを作成し、本文に HTML コードを記述してから、[
このチュートリアルの動作環境: Windows7 システム、html5 バージョン、DELL G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。
html セカンダリ タブの実装方法:
1. Web ページ コードを記述するソフトウェアを開き、新しい HTML Web ページ ファイルを作成し、HTML コードを記述します。本文内:
<body> <div class="a"> <ul> <li> <a href="#">一级</a> <ul class="d"> <li><a href="#">二级</a></li> <li><a href="#">二级</a></li> </ul> </li> </ul> </div> </body>
2. CSS コードを <style></style> に記述します:
<style type="text/css">
.a ul li ul{
display: none;/*将 二级 菜单隐藏起来*/
}
.a ul li:hover ul{
display: block;/*当鼠标移动到一级标签后，ul即二级菜单显示出来*/
}
</style>3. 保存して実行すると、次のようになります。図では、マウスを置くと、前のレベルのメニューが表示された後、2 番目のレベルが表示されます。すべての手順を完了してください
関連する学習の推奨事項:html ビデオ チュートリアル
以上がHTMLにセカンダリタブを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。