<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

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

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Адаптивная верстка на flex (часть 1)

Адаптивная верстка на flex (часть 1)

На этом уроке сверстаем секцию с превью-постами типичного блога с максимальным использованием технологии flex.

Адаптивная верстка на flex (часть 1).

Создание HTML структуры

Создадим внешний контейнер container, ограничивающий ширину секции для самых больших дисплеев и самых маленьких. Внутри внешнего контейнера поместим flex-контейнер (гибкий) posts, в котором будут располагаться блоки с отдельными постами.

Блок с отдельным постом содержит изображение, дату, ссылку-заголовок на полный пост и фотографию автора поста. Секция содержит 5 постов и первый пост отличается от остальных. Разместим все посты по блокам с классом posts__element. А к первому, особенному блоку добавим класс модификатор posts__element--big. Это нужно для того, чтобы в дальнейшем задавать для него свои стили.

<div class="container">
  <div class="posts">
    <div class="posts__element posts__element--big">
      <img src="img/image1.jpg" alt="">
      <div class="posts__info">
        <p class="posts__date">Ноябрь 28, 2019</p>
        <h2>
          <a href="#">Фантастический завтрак для детей</a>
        </h2>
      </div>
    </div>
    <div class="posts__element">
    <img src="img/image2.jpg" alt="">
      <div class="posts__info">
        <p class="posts__date">Август 24, 2019</p>
        <h2>
          <a href="#">Рецепт коктейля из киви и малины</a>
        </h2>
        <div class="posts__author">
          <a href="#">
          <img src="img/author.png" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="posts__element">
      <img src="img/image3.jpg" alt="">
      <div class="posts__info">
        <p class="posts__date">Сентябрь 18, 2019</p>
        <h2>
          <a href="#">Веселые печеньки для детей</a>
        </h2>
        <div class="posts__author">
          <a href="#">
          <img src="img/author.png" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="posts__element">
      <img src="img/image4.jpg" alt="">
      <div class="posts__info">
        <p class="posts__date">Октябрь 08, 2019</p>
        <h2>
          <a href="#">Пышный домик из печенья</a>
        </h2>
        <div class="posts__author">
          <a href="#">
          <img src="img/author.png" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="posts__element">
      <img src="img/image5.jpg" alt="">
      <div class="posts__info">
        <p class="posts__date">Декабрь 28, 2019</p>
        <h2>
          <a href="#">Домашнее мороженое с малиной</a>
        </h2>
        <div class="posts__author">
          <a href="#">
          <img src="img/author.png" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Блог-посты, ожидаемо вытянулись в одну колонку. Всё готово для написания CSS кода, но об этом поговорим во второй части урока.

Адаптивная верстка на flex (часть 1).

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.