Как веб-сайт создает горизонтальную панель в нижней части страницы

Question

Я посещал некоторые сайты, где при прокрутке половины страницы в нижней части страницы появляется полупрозрачный горизонтальный столбец высотой 100–150 пикселей с изображением слева и некоторым сообщением, ссылками справа.

Как я могу его создать?

Answer 1

Это просто правило CSS.

#footer {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

Answer 2

Используя Chrome, нажмите CTRL-SHIFT I, затем нажмите на увеличительное стекло в нижнем левом углу, чтобы осмотреть элемент. Это лучший способ увидеть, как они сделали это на сайте, который вы просматриваете.

В IE F12 предоставляет инструменты разработчика, где инструмент выбора стрелок выполняет ту же работу. В Firefox используйте Firebug.

Тогда просто скопируйте их HTML. И Javascript тоже при необходимости.

Answer 3

Используйте элемент со стилем, подобным следующему:

#footer {
  opacity: 0.7;
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: #330000;
}

и затем кладите вещи в него, как вы хотите.