<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Пример адаптивной верстки на flexbox (#1)

Пример адаптивной верстки на flexbox (#1)

Не всякий раз верстка бесплатных макетов в учебных целях, хорошая идея. Такое занятие требует много времени и высока вероятность, что вам быстро надоест и вы бросите это дело. В худшем же случае и вовсе не начнете, испугавшись объема работ. У меня есть альтернативный вариант - оттачивать мастерство верстки, выборочно повторяя отдельные секции реальных сайтов в интернете. При таком способе конечно пострадает точность верстки, но перед вами и не стоит задача верстать Pixel Perfect. На мой взгляд куда важнее научиться применять выученные CSS правила и делать адаптив.

Откуда брать размеры шрифтов, отступы, коды цветов, если нет макета? Здесь вам в помощь инструменты разработчика (подсматриваем у оригинального сайта) и различные расширения для браузера. Для совсем новичков рекомендую начать с видеокурса "Вёрстка сайта с нуля 2.0"

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

Пример адаптивной верстки на flexbox.

Все элементы макета будущей HTML страницы распределены по логическим блокам, еще их называют секциями (тег section). На странице не может больше одного тега section, поэтому всем секциям присваивают классы. Внутри секции создадим контейнер, который будет отвечать за выравнивание элементов. Под выравниванием подразумевается ширина элемента, значение которой задается в CSS стилях.

Начинающим верстальщикам я рекомендую невидимые блоки окрашивать в какой-нибудь цвет. Блоку, который вы хотите подсветить на время верстки, добавляете дополнительный класс с кодом или названием цвета. В нашем примере, контейнер имеет розовый цвет. В дальнейшем, этот класс удаляете из HTML и CSS кода.

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

Зададим для контейнера максимальную ширину в 1200 пикселей и выровняем его по центру ширины браузера.

// Вспомогательный класс
.bg_pink {
    background: pink;
}

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

Пример адаптивной верстки на flexbox.

Приступим к наполнению контейнера тремя блоками с преимуществами. Чтобы убрать дефолтное поведение блоков: новый блок - новая строка, задействуем технологию flexbox. Внутри контейнера создадим ряд с классом advantages_row для трех колонок с классом advantages_col.

<div class="advantages_row">
    <div class="advantages_col">1</div>
    <div class="advantages_col">2</div>
    <div class="advantages_col">3</div>
</div>

.advantages_col {
    background-color: white;
    margin-left: 30px;
}

Пример адаптивной верстки на flexbox.

Зададим родителю advantages_row всего одно свойство display: flex и колонки встанут в одну строку. На данный момент содержимое контейнера прибито к его левому краю, для выравнивания колонок по центру применим свойство justify-content: center.

.advantages_row {
    display: flex;
    justify-content: center;
}
Пример адаптивной верстки на flexbox.

Далее зададим свойства для колонок, которые являются flex-элементами. Подробнее про управление размерами flex-элементов можете почитать в этой статье. Колонки поровну поделят между собой все пространство контейнера. Также для мобильной верстки укажем максимальную ширину. Зададим паддинги, чтобы контент не прилипал к границам колонок. Между колонками оставим отступы - свойство margin-left: 3%.

.advantages_col {
    flex: 0 0 32%;
    max-width: 32%;
    background-color: white;
    margin-left: 3%;
    padding: 2%;
}

Чтобы заданные паддинги и маржины не влияли на ширину элементов, прописывают всем элементам следующие свойства.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

Пример адаптивной верстки на flexbox.

Продолжение следует..

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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