Маленький (и глупый) вопрос о HTML нижнем колонтитуле

Question

У меня проблема с нижним колонтитулом в HTML: я хочу сделать нижний колонтитул следующим образом: введите описание изображения здесь

У кого-нибудь есть предложения? Большое спасибо!

Answer 1

Я создал это, используя CSS Grid, один из самых мощных способов создания макетов. Это похоже на изображение нижнего колонтитула, которое вы будете иметь sh. Надеюсь, что это решит вашу проблему

footer {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  background-color: #1d1d1d;
  color: #fff;
  padding: 10px;
  min-height: 150px;
  justify-items: center;
  align-items: center
}

footer h2, footer p{
padding: 0px;
margin: 0px
}

<footer>
  <div class='columns'>
    <h2>First Column</h2>
    <p>Sub-Heading</p>
  </div>
  <div class='columns'>
    <h2>Second Column</h2>
    <p>Sub-Heading</p>
  </div>
  <div class='columns'>
    <h2>Third Column</h2>
    <p>Sub-Heading</p>
  </div>
</footer>

Answer 2

Попробуйте использовать bootstrap сетку. Разделите строку на три столбца одинаковой ширины, а затем настройте в соответствии с вашими потребностями

Answer 3

<div class="footer"></div>
<div class="js">John Smith<br>Creative 
Entrepreneur</div>
<div class="ld"</div>


.footer {width: 300px; height: 100px; background-color: 
black;}
.js {position:relative; top:-50px; color: white; font-size: 6px; 
left: 20px;}
.ld {background-color: white; position: relative; top: -80px; 
height: 40px; width: 1px; z-index: 100; left: 100px;} 

Это начало для вас ...

Answer 4

Первый шаг: проанализировать структуру. Кажется, это 3 или 4 столбца с текстом по центру вертикально по центру. Для этого вы можете использовать cssgrid или горизонтальный flexbox.

Второй шаг: сделать то же самое для каждого столбца. Общая идея - 2 строки текста друг на друге с изображением слева. Это может быть достигнуто с помощью <img> и <div>, приклеенных друг к другу с помощью float: left;.

. Остальное - просто изменение стиля элементов, чтобы иметь приятную эстетику.