一个图片在最左上，然后一个导航条靠着这张图片的右边，另一个导航条在这个图片的正下方，详细代码及解析

这里提供一种实现方式，使用 HTML 和 CSS。

HTML 代码如下：

<div class="container">
  <div class="img-container">
    <img src="your-image-url" alt="your-image">
  </div>
  <div class="top-nav">
    <ul>
      <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
    </ul>
  </div>
  <div class="bottom-nav">
    <ul>
      <li><a href="#">Nav Item 4</a></li>
      <li><a href="#">Nav Item 5</a></li>
      <li><a href="#">Nav Item 6</a></li>
    </ul>
  </div>
</div>

CSS 代码如下：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 20px;
}

.img-container {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.top-nav, .bottom-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
  padding: 10px;
}

.top-nav {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.bottom-nav {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

解析：

首先，使用 `display: grid` 将整个容器设置为网格布局。将整个容器分为两列，左边是图片容器，右边是两个导航容器。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 20px;
}

图片容器占据了第一列的所有行，即 `grid-row: 1 / 3`，`grid-column: 1 / 2`。

.img-container {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

两个导航容器都放在第二列，上面的容器占据第一行，下面的容器占据第二行。这里使用了 `display: flex` 将导航项水平排列，并设置了一些样式。

.top-nav, .bottom-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
  padding: 10px;
}

.top-nav {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.bottom-nav {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

最后就是在 HTML 中添加图片和导航项，这里只是简单示例，实际使用时可以自行替换为自己的内容。