Web网页设计——制作简单的三级菜单

共计 1633 个字符，预计需要花费 5 分钟才能阅读完成。

怎么用 html 语言快速做一个网页的三级菜单呢？

随便写，不影响整体。 <h3 id='pk-menu-0'>上海信息工程大学</h3> ，在 style 里用这条语句调置 c 位：text-align: center; 既然咱们写的是菜单，就会使用到大量的列表标签，div 可以不用。 那么，我我们会用到哪些标签呢？ 最外层用到 <ul>无序标签， <ul class="nav1">用于构建网站的一级导航菜单列表。 会大量使用到 <li>列表标签，它是用于定义列表（有序列表 <ol>和无序列表<code> <ul></ul> </code>）中的单个项目。比如说其中 <li class="border1">就是导航菜单中的一个单独菜单项。使用这些列表标签不断嵌套，不仅三级菜单，想做多少都可以，宛如套娃游戏。实现点击跳转，使用 <a> 超链接标签， <li><a href="%E8%B7%B3%E8%BD%AC%E5%AF%B9%E8%B1%A1" target="_blank" rel="nofollow">文本</a></li> ，在用 css 加上一点鼠标悬停效果，就可做出一个还不错的扁平化网页菜单。</a> 需要代码的小伙伴见文章最后，代码效果图： <img title="Web 网页设计——制作简单的三级菜单" alt="Web 网页设计——制作简单的三级菜单" fetchpriority="high" decoding="async" alt=""height="1200"data-src="https://yojack.cn/wp-content/uploads/2024/10/webe7bd91e9a1b5e8aebee8aea1-e588b6e4bd9ce7ae80e58d95e79a84e4b889e7baa7e88f9ce58d95_6720b285a67c4-scaled.jpeg"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="1200"> <pre><code class="language-html"> <meta charset="UTF-8"> <link rel="stylesheet" href="/HTML+CSS%20exercise/reset.css"> <title>上海信息工程大学