如何在html中创建导航栏(make a navigation bar in html)

导航栏使网站访问者更容易移动到网站中的特定位置。您还可以通过将页面包含在导航栏中以供访问者查看来突出显示页面。这个wikiHow将向您展示如何用HTML制作导航栏。...

步骤

1选择您希望导航栏的外观。如果你没有任何想法，你可以看看你喜欢的网站，从中获得灵感。导航栏是垂直的还是水平的？当您将鼠标悬停在某个部分上时，导航栏是否会显示下拉菜单？单击页面时，导航栏是否会更改颜色？

2打开文本编辑器。Windows和Mac电脑都配有默认的文本编辑器程序，可以创建或编辑HTML。如果您使用的是Windows，则可以使用记事本，您可以在“开始”菜单中搜索记事本来查找此应用程序。对于具有更多功能的记事本程序，您可以尝试使用记事本++。如果你使用的是Mac电脑，你可以使用TextEdit，你可以在聚光灯下搜索。

3键入“&lt；nav&gt；”然后按↵ 进来这表示导航条形码的开头。

4类型“&lt；ul&gt；”然后按↵ 进来导航栏的核心是链接列表。您可以选择使用无序列表、有序列表或定义列表。大多数导航栏使用无序列表选项。

5键入“&lt；li&gt；”然后按↵ 进来这会将列表项标记添加到您接下来键入的内容中。

6在“LINKNAME”中键入页面链接然后按↵ 进来如果要包含指向主页的链接，请键入&lt；a href=“/”&gt；主页（&lt）/a&gt；

7键入“&lt；/li&gt；”关闭列表项标记。如果忘记关闭标记，您将在网页中看到错误。

8键入更多页面链接以填充导航栏。例如，您可以包含指向“联系我们”页面、关于页面、个人简历页面、产品页面和新闻页面的链接。确保每个链接都被“&lt；li&gt；”包围和“&lt；/li&gt；”。

9键入“&lt；/ul&gt；”关闭无序列表。&lt/ul&gt；标记将阻止代码继续列表。

10键入“&lt；/nav&gt；”关闭导航条形码。所有写在这个标签之外的代码都不会包含在导航栏中。您的代码可能如下所示：&lt；导航（&gt）&书信电报；ul&gt&书信电报；li&gt&书信电报；a href=“/”&gt；主页（&lt）/a&gt&lt/li&gt&书信电报；li&gt&书信电报；a href=“/打印”&gt；打印设计（&lt/a&gt&lt/li&gt&书信电报；li&gt&书信电报；a href=“/web”&gt；网页设计&lt/a&gt&lt/li&gt&书信电报；li&gt&书信电报；a href=“/bio”&gt；生物（&lt）/a&gt&lt/li&gt&书信电报；li&gt&书信电报；a href=“/联系人”&gt；联系人（&lt）/a&gt&lt/li&gt&lt/ul&gt&lt/导航（&gt）；

您需要将导航条形码放入“&lt；！DOCTYPE html&gt；”中文档的标记。

发表于 2022-06-30 11:23
阅读 ( 30 )
分类：计算机和电子产品

你可能感兴趣的文章

html5有什么新的？9个你需要知道的元素

...也可以用其他方法。例如，许多烹饪博客都有关于菜谱是如何产生的，以及为什么菜谱对作者很重要的个人故事。接下来是菜谱本身。你可以说这些元素中的每一个都是独立的。 ...

发布于 2021-03-12 16:07
阅读 ( 184 )

如何建立一个网站：初学者

...许你读过我们的一些HTML（理解HTML）和CSS教程，但不知道如何在更大的项目中使用这些语言。 ...

发布于 2021-03-15 13:25
阅读 ( 243 )

如何让python和javascript使用json进行通信

有没有想过如何在两种编程语言之间发送数据？是否尝试发送一个对象或多个数据段？ ...

发布于 2021-03-16 01:22
阅读 ( 290 )

什么是javascript？它是如何工作的？

...统编程语言的特殊特性。我们将深入研究它是什么，它是如何工作的，以及你能用它做什么。我们把它分解一下。 ...

发布于 2021-03-18 04:01
阅读 ( 262 )

管理firefox书签的完整指南

...号等功能的出现，浏览器书签已经过时。但如果你学会了如何管理和组织书签，它仍然很有用。 ...

发布于 2021-03-22 22:53
阅读 ( 301 )

如何在默认情况下阻止adobe reader dc的侧边栏打开？

...aderdc的设置和首选项带来了新的变化，这意味着重新学习如何调整一些东西来获得你喜欢的UI设置。有鉴于此，今天的超级用户问答帖子向读者展示了如何摆脱讨厌的边栏。今天的问答环节是由SuperUser提供的，SuperUser是Stack Exchan...

发布于 2021-04-08 08:41
阅读 ( 116 )

从提示框：获得新的谷歌导航栏早，容易亚马逊借阅图书馆搜索，有效的sd卡格式

...者评论，与大家分享有用的提示和窍门。本周我们将讨论如何提前获得新的Google导航栏，从网上搜索Kindle借阅库，以及如何解决SD格式问题。提前使用新的google导航栏本周早些时候，我们分享了一段视频片段，展示了新的谷...

发布于 2021-04-12 17:02
阅读 ( 228 )

...sh的应用程序带到iPhone上，英国的Android用户可以获得轮流导航，研究表明，超重可能会加速痴呆症。On Adobe, Flash CS5 and iPhone Applicati*** Because of the new iPhone developer license, Adobe will no longer be putting in any effort to develop Flash products for the...

发布于 2021-07-27 07:38
阅读 ( 210 )