如何制作 HTML 导航栏

2025 年 3 月 25 日 | 阅读 3 分钟

如果想在 Html 中制作导航栏，我们需要遵循以下步骤。通过这些步骤，我们可以轻松创建导航栏。

步骤 1： 首先，我们需要在任何文本编辑器中输入 Html 代码，或者打开我们想要制作导航栏的现有 Html 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Make a Navigation Bar
</Title>
</Head>
<Body> 
</Body> 
</Html>

步骤 2： 现在，我们需要在要制作导航栏的 <body> 标签中定义 <nav> 标签。

<Body> 
<nav>
   
   
</nav>
You are at JavaTpoint Site.....
</Body> 
</Html>

步骤 3： 之后，我们需要定义用于显示无序列表的 <ul> 标签。然后，我们需要在 <li> 标签中定义列表项。我们需要定义我们想要在导航栏中显示的那些项。

<Body> 
<nav>
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
<a href="#"> About </a>
</li>
<li>
<a href="#"> Contact </a>
</li>
<li> <a href="#"> Terms of use </a>
</li>
<li>
<a href="#"> Join Us </a>
</li>
</ul>
</nav>
You are at JavaTpoint Site.....
</Body> 
</Html>

步骤 4： 之后，我们需要将光标放在 <head> 中，紧邻标题标签的闭合之后。然后，我们需要定义 <style> 标签。步骤 4：之后，我们需要将光标放在 <head> 中，紧邻标题标签的闭合之后。然后，我们需要定义 <style> 标签。

<Head>    
<Title>   
Make a Navigation Bar
</Title>
<style type=text/css> 
  
   
</style> 
</Head>

步骤 5： 现在，我们需要指定不同的 id 属性，这些属性用于设置导航栏的位置和颜色。因此，我们需要在 head 标签中使用以下代码。我们也可以根据自己的需求更改属性的值。

<style type=text/css> 
body 
{
height: 125vh;
margin-top: 80px;
padding: 30px;
background-size: cover;
font-family: sans-serif;
}
header {
background-color: orange;
position: fixed;
left: 0;
right: 0;
top: 5px;
height: 30px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
}
header * {
display: inline;
}
header li {
margin: 20px;
}
header li a {
color: blue;
text-decoration: none;
}
</style> 

步骤 6： 之后，我们需要在 <nav> 标签的开标签之前输入 <header> 标签。并且我们还需要关闭此标签。最后，我们需要保存 Html 文件，然后在浏览器中运行该文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Make a Navigation Bar
</Title>
<style type=text/css> 
body 
{
height: 125vh;
margin-top: 80px;
padding: 30px;
background-size: cover;
font-family: sans-serif;
}
header {
background-color: orange;
position: fixed;
left: 0;
right: 0;
top: 5px;
height: 30px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
}
header * {
display: inline;
}
header li {
margin: 20px;
}
header li a {
color: blue;
text-decoration: none;
}
</style> 
</Head>
<Body> 
<header>
<nav>
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
<a href="#"> About </a>
</li>
<li>
<a href="#"> Contact </a>
</li>
<li> <a href="#"> Terms of use </a>
</li>
<li>
<a href="#"> Join Us </a>
</li>
</ul>
</nav>
</header>
You are at JavaTpoint Site.....
</Body> 
</Html>

上述 HTML 代码的输出显示在以下屏幕截图中

下一主题如何在 Html 中使用 PHP

如何制作 HTML 导航栏

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何制作 HTML 导航栏

相关帖子

HTML CSS

HTML 动画

HTML 颜色样式

HTML 列表框

HTML 盒子

HTML 居中文本

HTML Boilerplate

如何创建 HTML 注册表单

使用 Shunting yard 算法在 HTML 中使用 JavaScript 创建计算器

如何制作 HTML 表格边框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器