Георгиевская ленточка стала символом празднования Дня Победы во Второй мировой войне. В майские праздники ее часто помещают на одежду и прикрепляют к автомобилям. Вы можете разместить ленточку и на своем сайте. Предлагаем несколько простых способов, как это сделать.
Картинка в углу сайта
После тега 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
до нужного размера.