Размещаем на сайте Георгиевскую Ленточку

Георгиевская ленточка стала символом празднования Дня Победы во Второй мировой войне. В майские праздники ее часто помещают на одежду и прикрепляют к автомобилям. Вы можете разместить ленточку и на своем сайте. Предлагаем несколько простых способов, как это сделать.

Картинка в углу сайта

После тега body вставляем этот код.

<div id="lenta" style="position:absolute; top:0; right:0;"><img border="0" src="/images/lenta.png" alt="9 Мая" width="300"/></div>

Код выводит изображение, указанное в атрибуте src, на сайте в правом верхнем углу. Позиция определяется свойством position:absolute; top:0; right:0;

  • Absolute означает абсолютное позиционирование в указанном месте. При этом кроме top (верх) и right (право) можно использовать bottom (низ), left (лево), меняя место вывода элемента.
  • Подходящее изображение вы можете легко найти в интернет или взять из примеров ниже. Рекомендуется использовать формат png с прозрачным фоном.
  • width – определяет отображаемую ширину картинки в пикселях, вместо 300 вы можете указать более подходящий для вашего сайта размер.

На маленьких мобильных экранах этот элемент возможно будет мешать навигации. Чтобы спрятать его, добавьте в файл со стилями следующую инструкцию. На примере картинка не будет выводиться на экранах шириной до 480.

@media (max-width:480px) {
  #lenta {
    display: none;
  }
}

Фиксированное изображение при прокрутке

<div style="position:fixed; top:0; right:0;"><img border="0" src="/images/lenta.png" alt="9 Мая" width="300"/></div>

Отличие этого кода от предыдущего в значении position:fixed, что означает фиксацию картинки при прокрутке сайта. Таким образом, изображение всегда будет в поле видимости. Такое можно использовать, когда у сайта слева или справа есть пустые поля, куда и можно поместить ленточку.

Опять же учтите, что на маленьких экранах ленту лучше скрыть, пользуясь инструкцией из предыдущего примера.

Примеры изображений

Ниже представлены изображения в формате png, кроме последнего анимированного gif. Картинки большие, но вы их уменьшите за счет инструкции width до нужного размера.

glenta10

glenta9

glenta8

glenta7

glenta6

glenta5

glenta4

glenta3

glenta2

glenta1

glenta11

Оцените статью
Инструкции для Web
Добавить комментарии