Последние поступления

  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс

    Последние новости

    • Онлайн-школа создания видео с доступом по подписке на более, чем 50 видео-курсов по теме видеопроизводства. (Сергей Панферов)
    • Уроки. Онлайн - Сервис Figma. Бесплатно с 29 октября по 4 ноября. (Даниил Волосатов)
    • Скидки до 40%. Распродажа в честь Хэллоуина. (
    • Скидка 30%. Цветокоррекция летних портретов. (Евгений Карташов и команда «Фото-монстра»)
    • Скидка 30% на курсы Александра Куртеева
    • Бесплатный вебинар «Capture One Pro. Быстрый старт». (Ильдар Хайрулин - Фотошоп-мастер)

      Мы в сети

      VK
      FB

      Оформите подписку!

       Введите Ваш E-m@il и
      получайте свежие новости

      Видеокурс
      Бесплатный видеокурс "Секреты техники резиновой верстки сайта" (Андрей Бернацкий - WebForMySelf)
      Бесплатный видео урок

      Бесплатный видео урок Бесплатный видеокурс "Секреты техники резиновой верстки сайта" (Андрей Бернацкий - WebForMySelf)

      Страница автора - Андрей Бернацкий - WebForMySelf
      Страница автора

      Автор: Андрей Бернацкий

      Получи уроки совершенно бесплатно 5 секретных техник резиновой верстки сайта. В этом уроке мы досконально разберем все подводные камни такого, казалось бы, простого понятия, как ширина элемента. Поймем, из чего она складывается и что представляет на самом деле. Так же рассмотрим работу свойства float. Рассмотрим на примере, почему плавающие элементы при изменении ширины окна браузера съезжают на новую строку, и решим данную проблему. Рассмотрим и решим проблему схлопывания границ блока.

      Смотреть видео:

      Техника резиновой верстки сайта. Техника №1. Ширина элемента и свойство float. (Андрей Бернацкий - WebForMySelf)

      Содержание:

      • Техника 1. Ширина элемента и свойство float.

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

      • Техника 2. Создание резинового меню, используя списки.

      Навигация - это, пожалуй, самая главная часть сайта. И у резинового сайта, как правило, навигация тоже резиновая. Создать резиновое меню, используя таблицы, труда не составит. Но когда речь заходит о создании такого меню, используя списки, возникает много вопросов. В уроке мы как раз создадим резиновое меню, используя списки. Разберемся с теорией создания такого меню. Выявим и решим возможные проблемы.

      • Техника 3. Выстраиваем элементы позиционированием.

      Часто возникают ситуации, когда нужно сделать перекрытие элементов. Или заставить элемент располагаться, например, в правом нижнем углу, независимо от того, как расположены окружающие блоки. Данную проблему лучше всего решает свойство position. В уроке мы разберемся с позиционированием элементов. Поработаем над перекрытием элементов с помощью свойства z-index. Выясним необходимое условие для работы свойства z-index.

      • Техника 4. Центрирование элемента переменной ширины.

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

      • Техника 5. Выравнивание блоков по ширине резинового блока.

      Иногда возникает задача, когда нужно расположить несколько блоков по всей ширине родительского блока. То есть первый блок должен быть у самого левого края, последний блок должен быть у правого края. А расстояния между остальными элементами чтобы было одинаковым. Такого несложно добиться при верстке макета фиксированной ширины. Но мы усложним задачу и решим ее в уроке для резинового блока.

      • Страница курса - Секреты техники резиновой верстки сайта. (Андрей Бернацкий - WebForMySelf)
      • Похожие видеокурсы по теме:
        Видеокурс Бесплатный видеокурс
        Видеокурс Бесплатный видеокурс
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видеокурс
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
      • Смотрите бесплатное видео по теме:
        Промо ролики видеокурса Основы адаптивной верстки сайт под мобильные . (Андрей Бернацкий - WebForMySelf)
        Промо ролики видеокурса Основы оптимизации сайтов. (Андрей Бернацкий - Webformyself)
        Промо ролики видеокурса Премиум уроки по HTML&CSS. (Андрей Бернацкий - Webformyself)
        Промо ролики видеокурса Современные тенденции и подходы в веб-разработке. (Андрей Бернацкий - Webformyself)
        Промо ролики видеокурса Создание сайта с нуля. (Андрей Бернацкий - Издательство Info-DVD)
        Промо ролики видеокурса Фреймворк Laravel. Теория и первая практика. ( Гавриленко Виктор, Андрей Бернацкий - Webformyself)

      Добавить комментарий


      Защитный код
      Обновить