Как добавить группу вверху страницы в 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>