如何在HTML页面顶部添加乐队

Question

我想创建一个简单的HTML页面，如下所示：

这是我为绿带编写HTML代码的方式，这里不再讨论正文的内容（左，中，右部分）：

h1 {
  color: white;
  font-size: 30px;
}

.band-header {
  text-align: left;
  background-color: #1abc9c;
}

<div class="band-header">
  <header class="site-header">
    <h1>Sample Web Application</h1>
    <img src="image.png" align="right">
  </header>
</div>

这是我的问题：
 1.我知道我的代码中有很多错误，我没有得到的第一件事是绿色标题背景从未出现。即使我将CSS更改为.site-header，它仍然没有出现。
 2. 如何使文本**"Sample Web Application"**出现在绿色带的左下方？它总是显示在左上方。有左下对齐吗？
 3. 如何使图像位于绿色带的右上角？？我尝试向右对齐，但始终未位于左上角。有没有办法将其放在右侧和顶部？

我知道有很多问题，而且我只是HTML和CSS的新手。有人可以给点灯吗？对此，我真的非常感激。非常感谢。

Answer 1

1. 绿色出现在您的代码中，但是标题没有指定的高度。因此，它与其最高子元素一样高。在下面，我将标题设置为100px高，以允许子元素的底部和顶部对齐。

2 + 3：容器（标题）定义为flexbox。这允许其子元素（项目）的对齐选项。

.band-header>header {
  height: 100px;
  background-color: #1abc9c;
  display: flex;
  justify-content: space-between;
}

.band-header>header h1 {
  color: white;
  font-size: 30px;
  margin: 0;
  align-self: flex-end; /* put it at the bottom */
}

.band-header>header img {
  align-self: flex-start; /* put it at the top */
}

<div class="band-header">
  <header class="site-header">
    <h1>Sample Web Application</h1>
    <img src="https://via.placeholder.com/50x50">
  </header>
</div>