Как сделать фиксированный двухстрочный нижний колонтитул сайта с помощью CSS / HTML

#html #css

#HTML #css

Вопрос:

Я хочу сделать адаптивный нижний колонтитул сайта с использованием CSS.

Требование к адаптивному нижнему колонтитулу сайта (обе горизонтальные линии будут иметь центрированные ссылки / текст, одноцветный фон):

 <link1>-gap-<link2>-gap-<link3>-gap-<link4>
Copyright Text.

Какой CSS мне нужен?

Ответ №1:

Не уверен, в чем именно проблема. Просто оберните нижний колонтитул и поместите его text-align: center; в центр содержимого. Вы можете использовать абзацы или разрывы строк (br) для обеспечения 2-строчного стиля. Конечно, вы можете оформить все так, как хотите.

 body {
  margin: 0;
}

#footer {
  text-align: center;
  background-color: grey;
  padding: 5px;
}

#footer p {
  margin: 0;
}

#footer a {
  margin: 0 10px;
  color: black;
}

 <div id="footer">
  <p>
    <a href="">Link 1</a>
    <a href="">Link 2</a>
    <a href="">Link 3</a>
    <a href="">Link 4</a>
  </p>
  <p>Copyright Text</p>
</div>

1. Спасибо, я хотел создать пробел между строкой ссылок и строкой текста авторского права под ней. Заполнение портит весь баннер. Есть ли способ создать пробел только между двумя строками?

2. да footer p { margin: 5px; } , если вы увеличите разрыв до 5 пикселей между обеими строками, альтернативно увеличьте его до любого значения, которое вам нравится.

3. Хорошо, но это приведет к тому, что поля в верхней части элемента p также будут отсутствовать? Я хочу только пробел между двумя строками <p> (одна ссылка, один текст авторского права).

4. едва ли, кроме того, вы можете изменить заполнение оболочек, а также перейти в отрицательное значение. удаление любых полей.

5. Большое спасибо! Ваш ответ приветствуется

Ответ №2:

Попробуйте следующее:

 <body>
<div style="height:1000px;">
TEXT
</div>
<!-- the following is the footer-->

<div style="width:100%;text-align:center;">

<div style="width:24%;display:inline-block;">LINK1</div>
<div style="width:24%;display:inline-block;">LINK2</div>
<div style="width:24%;display:inline-block;">LINK3</div>
<div style="width:24%;display:inline-block;">LINK4</div>

<div style="100%;">Copyright Text</div>

</div>
</body>

Наслаждайтесь….

1. при ответе вы также должны объяснить, что вы сделали и как это работает, чтобы другие поняли это. Предоставление фрагментов без каких-либо реальных комментариев имеет ценность в качестве цели обучения. Aso, если вопрос конкретно касается CSS, вам также следует подать в суд на CSS, а не на встроенный стиль.

2. Спасибо. Добавлю объяснение и буду использовать CSS в следующий раз. Спасибо