Створюємо сторінку з красивим слайдером
У цьому уроці ми створимо сторінку зі слайдером, який зможе перегортати Ваші фотографії з таким ефектом, з яким Ви захочете. Такий слайдер буде виглядати дуже ефектно і на головній сторінці, і в шапці сайту. Причому зробити його буде зовсім не складно! Зробивши одного разу і зрозумівши принцип, Ви зможете використовувати цю техніку в своїх роботах як Ви побажаєте.
2. За допомогою тега section створимо всередині тега контейнер і дамо йому id = "wrapper". Так ми зможемо контролювати ширину нашої сторінки.
3. Зараз ми використовуємо ще один HTML5 тег: тег хедера. Розмістимо його всередині нашого контейнера. Усередині нього розмістимо порожній див з id = "logo". Це дозволить нам впливати на нього через таблицю стилів, яку ми скоро створимо. Це дозволить залишатися нашій сторінці легшою.
4. Усередині тега хедера розмістимо ще один HTML5 тег - тег навігації. Усередині нього, за допомогою ненумерованого списку розміщуємо кнопки навігації. Активній кнопці дамо class = "current" для того, щоб її стиль відрізнявся від інших.
5. Тепер після нашого тега з хедером розмістимо тег section і назвемо його slider_wrap, в якому буде розташовуватися слайдер. Усередині створимо div id = "slider_bg" в ньому буде розташований наш зелений фон слайдера. Далі створимо div id = "shadow". де і буде тінь від слайдера:
6. Поки ми не перейшли до CSS властивостями давайте включимо в наш
2. Тепер займемося стилями для навігаційної панелі. У мене вийшло так (якщо ви робите свій дизайн відмінний від мого, то редагуйте кольору і все інше так, як підходить Вам):
3. Задамо стилі для слайдера:
Тут ми опускаємо його на 50px і вирівнюємо по лівій стороні.
4. Wow_slider і тінь.
У wow_slider будуть розташовуватися наші картинки. Задамо стилі для нього і для нашої нижньої тіні:
Будьте в курсі нових публікацій на Блозі!