CSS设置导航栏跳转链接

最新推荐文章于 2024-07-19 15:50:46 发布

胡说先森

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量1.2k

点赞数

文章标签： css 前端 html javascript css3

本文链接：https://blog.csdn.net/weixin_35756373/article/details/128871056

版权

要在 CSS 中设置导航栏跳转链接，你可以使用 a:link 选择器来指定未访问链接的样式，使用 a:visited 选择器来指定已访问链接的样式，使用 a:hover 选择器来指定鼠标悬停在链接上时的样式，以及使用 a:active 选择器来指定链接被点击时的样式。

例如，下面的 CSS 代码指定了未访问链接为蓝色，已访问链接为红色，鼠标悬停在链接上时为绿色，点击链接时为黄色：

a:link {
  color: blue;
}

a:visited {
  color: red;
}

a:hover {
  color: green;
}

a:active {
  color: yellow;
}

你还可以使用类似于 .nav-link 的类选择器来设置导航栏中的链接样式，如下所示：

.nav-link {
  color: blue;
}

.nav-link:visited {
  color: red;
}

.nav-link:hover {
  color: green;
}

.nav-link:active {
  color: yellow;
}

在 HTML 中，你可以使用 <a> 标签来创建链接，如下所示：

<ahref="http://www.example.com" class="nav-link">Example</a>

关注