并且接着在图片的下面设置一个竖直靠左的导航条颜色

要实现在图片下面设置一个竖直靠左的导航条颜色，可以使用 HTML 和 CSS。以下是一个简单的示例代码：

<div class="container">
  <div class="image-container">
    <img src="your-image.jpg" alt="your image">
  </div>
  <div class="nav-container">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>
</div>

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.image-container {
  margin-right: 20px;
}

.nav-container {
  background-color: #f2f2f2;
  padding: 10px;
}

.nav-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 10px;
}

.nav-container li a {
  color: #333;
  text-decoration: none;
}

这个示例中，我们使用了 flexbox 布局来将图片和导航条放在同一行。`.container` 元素设置了 `display: flex;` 和 `flex-direction: row;`，让子元素水平排列。`.image-container` 和 `.nav-container` 分别包含了图片和导航条。我们使用了 margin 和 padding 来控制它们之间的间距和内边距。

`.nav-container` 元素使用了背景色和 padding 来创建一个导航条。我们使用了无序列表来列出链接，然后使用 margin 和 padding 来控制它们之间的间距和内边距。最后，我们设置了链接的颜色和去除了下划线。

你可以根据需要调整这些样式来满足你的需求。