[分享]css中如何用图片做导航

发布于 2024-11-11 19:30:42

今天要为大家介绍一下在CSS中如何用图片做导航。首先，在HTML中定义导航的链接，在每个链接中添加一个图片标签，例如：接下来，我们使用CSS来控制导航链接的样式，我们要设置链接为块级元素（dis...

今天要为大家介绍一下在CSS中如何用图片做导航。
首先，在HTML中定义导航的链接，在每个链接中添加一个图片标签，例如：

<a href="home.html"><img src="home.png"></a>
<a href="about.html"><img src="about.png"></a>
<a href="contact.html"><img src="contact.png"></a>

接下来，我们使用CSS来控制导航链接的样式，我们要设置链接为块级元素（display:block）以达到覆盖整个导航的效果，同时也可以调整宽高等属性。例如：

nav a {
  display: block;
  width: 50px;
  height: 50px;
}

然后，我们为每个链接设置不同的背景图片，例如：

nav a[href="home.html"] {
  background-image: url("home.png");
}
nav a[href="about.html"] {
  background-image: url("about.png");
}
nav a[href="contact.html"] {
  background-image: url("contact.png");
}

最后，我们还可以为链接添加悬停效果和活动状态，例如：

nav a:hover {
  opacity: 0.8;
}
nav a.active {
  opacity: 1;
}

这样，我们就可以用图片制作出漂亮的导航啦！
总的代码如下：

nav a {
  display: block;
  width: 50px;
  height: 50px;
}
nav a[href="home.html"] {
  background-image: url("home.png");
}
nav a[href="about.html"] {
  background-image: url("about.png");
}
nav a[href="contact.html"] {
  background-image: url("contact.png");
}
nav a:hover {
  opacity: 0.8;
}
nav a.active {
  opacity: 1;
}

感谢大家阅读，希望这篇文章对你有所帮助！

css 教程

一个月内的热帖推荐

[分享]css中如何用图片做导航

91云脑