css导航栏上加入图片

CSS导航栏是网站设计中常用的一个元素。而在导航栏上添加图片，可以使整个网站显得更加生动、有趣、具有个性。本文将介绍如何在CSS导航栏上添加图片。

/*HTML代码*/
<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

/*CSS代码*/
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.nav li {
  padding: 0 20px;
}
.nav li a {
  display: inline-block;
  text-decoration: none;
  color: #333333;
  font-weight: bold;
  padding: 10px;
}

css导航栏上加入图片

上述代码是一个简单的CSS导航栏，包含五个列表项，对应着网站的首页、新闻、产品、服务和联系我们五个页面。我们的目标是在每个列表项后面添加对应的图片。首先，在HTML代码中，我们需要添加图像标签，如下所示：

<ul class="nav">
  <li>
    <a href="#">首页</a>
    <img src="home.png" alt="首页图标">
  </li>
  <li>
    <a href="#">新闻</a>
    <img src="news.png" alt="新闻图标">
  </li>
  <li>
    <a href="#">产品</a>
    <img src="product.png" alt="产品图标">
  </li>
  <li>
    <a href="#">服务</a>
    <img src="service.png" alt="服务图标">
  </li>
  <li>
    <a href="#">联系我们</a>
    <img src="contact.png" alt="联系我们图标">
  </li>
</ul>

在每个列表项的内部，我们插入了一个图像标签。按照上述代码片段，每个列表项后面会有一个带有alt属性的图标。我们可以通过CSS代码来设置这些图像，让它们在导航栏中正确地显示出来。我们可以将以下代码添加到CSS文件中：

.nav li img {
  margin-left: 10px; /*为了让图标与文字有一定的间隔*/
  width: 20px;
  height: 20px;
}

上述代码片段对导航栏中的图像进行了样式设置，包括设置了图像的宽度和高度，以及添加了左边距。在这里，我们将图像的宽和高设置为了20像素。

通过上述代码，我们可以很容易地在CSS导航栏中添加图像。这种添加图像的方法也可以用于其他导航栏的设计中。希望读者能够通过本文中的代码片段和CSS样式快速地学会如何添加图像到导航栏中。

css导航栏上加入图片

相关文章