<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Верстка таблицы (SCSS + flexbox)

Верстка таблицы (SCSS + flexbox)

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

Верстальщики очень не любят делать верстку таблиц, из-за сложностей получить адаптивность. Однако в нашем случае все не так страшно, поскольку в этой таблице мало контента и нам не нужно будет её перестраивать.

HTML структура

Визуально секция делится на две части: таблица (слева) и отдельный блок (справа). Обе части являются flex-элементами и находятся в общем flex-контейнере advantage.

Верстка таблицы (SCSS + flexbox).

<div class="advantage">
    <table class="advantage-table"></table>
    <div class="advantage-users">список пользователей</div>
</div>

.advantage {
    display: flex;
    justify-content: space-between;
}

В свою очередь флексовый контейнер находится внутри внешнего контейнера container и секции section.

<section class="section">
  <div class="container">
    <div class="advantage"></div>
  </div>
</section>

В секции задаются внутренние отступы.

.section {
    padding: 100px 0;
}

Внешний контейнер ограничивает всю конcтрукцию по ширине и выравнивает по центру страницы.

.container {
    max-width: 960px;
    margin: 0 auto;
}

Верстка таблицы (HTML код)

Верстка таблицы (SCSS + flexbox).

<table class="advantage-table">
  <thead>
   <tr>
    <th class="advantage-table__cell advantage-table__title"></th>
    <th class="advantage-table__cell advantage-table__title advantage-table__cell_active">Advogrand</th>
    <th class="advantage-table__cell advantage-table__cell_others advantage-table__cell_others-top advantage-table__title">Юридические компании</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td class="advantage-table__cell advantage-table__info">Дополнительные услуги</td>
    <td class="advantage-table__cell advantage-table__cell_active">Входят в абонемент</td>
    <td class="advantage-table__cell advantage-table__cell_others">Оплачиваются отдельно</td>
   </tr>
   <tr>
    <td class="advantage-table__cell advantage-table__info">Время работы</td>
    <td class="advantage-table__cell advantage-table__cell_active">Круглосуточно</td>
    <td class="advantage-table__cell advantage-table__cell_others">С 9:00 до 18:00</td>
   </tr>
   <tr>
    <td class="advantage-table__cell advantage-table__info">Оплата</td>
    <td class="advantage-table__cell advantage-table__cell_active">Всего 1 раз в год</td>
    <td class="advantage-table__cell advantage-table__cell_others advantage-table__cell_others-bottom">Каждый раз при обращении</td>
   </tr>
  </tbody>
</table>

Верстка таблицы (SCSS код)

     .advantage {
  display: flex;
  justify-content: space-between;

  &-table {
    color: #000;
    font-size: 13px;
    text-align: center;
    border-spacing: 0;

    &__cell {
      width: 210px;
      height: 50px;

      &_others {
        border-right: 1px solid #e8e8e8;
        border-left: 1px solid #e8e8e8;

        &-top {
          border-top: 1px solid #e8e8e8;
    }

        &-bottom {
          border-bottom: 1px solid #e8e8e8;
      }
    }

    &_active {
      background-color: #26b83a;
      color: #fff;
      box-shadow: 0 10px 10px rgba(38, 184, 58, 0.2);
      }
    }

  &__title {
    font-size: 14px;
    font-weight: 700;
    }

  &__info {
    text-align: right;
    padding-right: 30px;
      }
    }

Верстка адаптивной таблицы

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

Верстка таблицы (SCSS + flexbox).

@media only screen and (max-width: 992px){
  .container {
    max-width: 720px;
  }
  .advantage {
    flex-direction: column; // главная ось поменяла направление
    align-items: center;
  }
  .advantage-table {
    margin-bottom: 60px;
  }
  .advantage-users {
    height: 290px;
    align-self: center;
  }
}

@media only screen and (max-width: 576px){
  .advantage-table {
    font-size: 10px;
    margin-bottom: 40px;
  }
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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