引导导航栏 - Html

介绍

导航栏是指在网站页面顶部或侧边，用来显示网站分类、功能及其链接的区域，是网站常用的标配之一。在Html中，利用一些标签，可以很方便地实现导航栏的功能。

实现

<ul> 标签

• 在Html中，我们通常采用 <ul> 标签来实现导航栏的主体框架，其中包含多个 <li> 标签，每个 <li> 标签代表一个选项卡。
• 在 <ul> 标签中，通常使用了 <a> 标签，用于设置该选项卡的超链接，跳转到相应页面。

例如：

<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

该代码片段表示一个包含三个选项卡的导航栏，分别为首页、关于我们、联系我们。

class 和 id 属性

• 通常可以利用 class 或 id 属性对导航栏进行样式和功能的设置。
• 如 id="nav"，可以为导航栏设置一个唯一标识符，在JavaScript中调用它的DOM对象，实现一些交互效果。

例如：

<ul id="nav">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

该代码片段表示一个包含三个选项卡的导航栏，在第一个 <li> 标签中指定了 class="active"，表示这是当前所在页面对应的选项卡，可以利用CSS设置样式。

利用CSS进行样式设置

• 通过CSS，可以设置导航栏的样式，例如颜色、字体、背景等。
• 可以利用 :hover 伪类设置当鼠标悬浮在选项卡上时的样式。
• 利用 class 或 id 属性为各个选项卡设置不同的样式。

例如：

#nav {
    background-color: #3388cc;
    padding: 10px;
}
#nav li {
    display: inline-block;
    margin-right: 20px;
}
#nav li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
}
#nav li a:hover {
    color: #ff0000;
}
#nav li.active a {
    color: #ff0000;
}

该代码片段表示为导航栏设置了背景色为 #3388cc，选项卡之间与页面边缘的距离为10px，选项卡的字体颜色为白色，大小为18px。当鼠标悬浮在选项卡上时，字体颜色变为红色，当前所在页面对应的选项卡的字体颜色为红色。

总结

在Html中利用 <ul> 和 <li> 标签实现导航栏，并结合CSS进行样式的设置，可以轻松实现一个简单的导航栏。同时，通过 class 和 id 属性可以为导航栏设置不同的样式和功能。