Добавлен: 13.02.2019
Просмотров: 5244
Скачиваний: 30
Задаём для кнопки квадратный блок (ширина и высота 80 пикселей) и при помощи свойства border-radius превращаем его в круг. Позиционируем его абсолютно таким образом, чтобы половина блока ушла за границу контейнера. Благодаря свойству overflow: hidden контейнера, всё, что вышло за его границы, обрезается. Таким образом, мы получаем два полукруга.
Чтобы отцентрировать кнопки по высоте, используем следующий приём. Выставляем кнопке top: 50%. Таким образом, верхняя граница кнопки будет находиться посередине контейнера. Также указываем трансформацию — сдвиг по высоте на 50%: transform: translateY(-50%). Проценты, указанные в трансформации, отсчитываются не от размера родительского элемента (контейнера), а от размера самого блока. Таким образом, блок смещается на половину высоты вверх. В результате центр блока совмещен с центром контейнера.
Далее внутри кнопок надо нарисовать стрелку влево и стрелку вправо. Используем для этого псевдоэлементы :after, и стрелки рисуем в виде соответствующих символов Unicode.
Отцентрировать стрелку по высоте, используем еще один приём вертикального выравнивания: задаем высоту строки равной высоте контейнера (line-height: 80px).
_____________________________
Прописываем код слайдер, используя вёрстку кнопки.
Отдельные пары кнопок будут использоваться для каждого кадра слайдера. В первом кадре кнопка «Назад» активирует последний кадр, а кнопка «Вперёд» — второй кадр. Во втором кадре кнопка «Назад» активирует первый кадр, а кнопка «Вперёд» — третий кадр.
Код HTML для вёрстки слайдера:
<div class='sliderB'>
<input type="radio" name="slider1" id="slider1_1" checked="checked"> <div>
<p>Надпись для слайда 1</p>
<img src=”image.jpg”>
</div>
<label for="slider1_4"></label> <!--прописывается кнопка «Назад», которая возвращает первый слайд к последнему слайду -->
<label for="slider1_2"></label> <!—прописывается кнопка «Вперёд», которая возвращает к следующему слайду -->
<input type="radio" name="slider1" id="slider1_2"> <div>
<p>Надпись для слайда 2</p>
<img src=”image.jpg”>
</div>
<label for="slider1_1"></label> <!--прописывается кнопка «Назад», которая возвращает к предыдущему слайду -->
<label for="slider1_3"></label> <!--прописывается кнопка «Вперёд», которая возвращает к
следующему слайду. Если это кнопка последнего слайда, то должна возвращать первый
слайд -->
<!—таким образом прописываем следующие слайды, их количество – не менее 3-х-->
</div>
Из таблиц стилей от предыдущего слайдера мудаляем всё, что связано со старыми кнопками и добавляем оформление новых кнопок:
.sliderB {
width: 400px;
height: 250px;
border: 1px solid #888;
position: relative;
overflow: hidden;
}
.sliderB > input {
display: none;
}
.sliderB > label {
display: none;
}
.sliderB > input:checked + div + label,
.sliderB > input:checked + div + label + label {
display: block;
width: 80px;
height: 80px;
border-radius: 40px;
background-color: rgba(220, 220, 220, 0.4);
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
.sliderB > input:checked + div + label:after,
.sliderB > input:checked + div + label + label:after { font-size: 30px;
color: #fff;
display: block;
position: absolute;
top: 0px;
bottom: 0px;
line-height: 80px;
}
.sliderB > input:checked + div + label {
left: -40px;
}
.sliderB > input:checked + div + label:after {
content: '◀';
left: 55%;
}
.sliderB > input:checked + div + label + label {
right: -40px;
}
.sliderB > input:checked + div + label + label:after { content: '▶';
right: 55%;
}
.sliderB > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 0;
}
.sliderB > div {
visibility: hidden;
opacity: 0;
transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0.9s;
}
.sliderB > input:checked + div {
visibility: visible;
opacity: 1;
transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0s;
}
.sliderB > div > p {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 2px #000;
}
Пример выполненной работы:
Целевая страница (англ. landing page, также «посадочная страница») — веб-страница, основной задачей которой является сбор контактных данных целевой аудитории. Используется для усиления эффективности рекламы, увеличения аудитории. Целевая страница обычно содержит информацию о товаре или услуге.
Переход на целевые страницы часто осуществляется из социальных медиа, email-рассылок и рекламных кампаний в поисковых системах.
Такая страница отличается от других интернет страниц тем, что на ней нет ненужной, отвлекающей внимание, рекламы, ненужного текста, разных мигающих баннеров и всплывающих меню.
-
интернет сфере подобные странице имеют различные названия, в частности, их называют: страницами приземления, посадочные страницы, страницами захвата, одностраничными сайтами, landing page и т.д.
Это сайты, состоящие из одной страницы, которую посетитель пролистывает вниз, получая необходимую информацию. Главное отличие Landing Page от обычного сайта-визитки состоит в том, что на нем находится минимум функциональных и структурных элементов. На самом деле лендинги призваны продавать. Это их главная и основная цель. Такие сайты возникли в то время, когда исследователи и маркетологи проанализировали статистику и поведенческий фактор посетителей стандартных сайтов и пришли к выводу, что пользователя интересует всего несколько значимых факторов. Таким образом, лендинг-сайт – это минималистичный сайт.
Особенности landing page
-
Обычно, это одностраничный сайт, который не перегружен файлами (графика, видео и т.д.). Из-за минимализма страницы на ней хорошо читается текст.
-
На странице — landing page не должна размещаться реклама, она и так является рекламой ваших услуг и товаров.
-
На лендинг пейдж не должна размещаться лишняя информация, которая не относится к продаваемому товару или услуги.
-
Посадочная страница должна иметь определенную структуру: рекламный текст, картинки, минимальная навигация страницы, отзывы и т.д. Таким образом отличить «лендинг» от другой обычной страницы сайта очень легко.
Как
должен выглядеть лендинг и что должен
содержать
– заголовок в верхней части страницы
– подробное описание услуги или продукта
– фотографии (картинки), видеоролики, которые относятся к продаваемому товару или услуге
– выгоды покупки (акции и т.д.)
– отзывы покупателей
– продающий рекламный текст
– тригеры
– призывы к действию (подписка, покупка и т.д.)
Лендинг должен в яркой, броской и настойчивой форме рассказать посетителям о продукте и, по возможности, заставить их принять решение о покупке.
