<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

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

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

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

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

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

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

Адаптивная верстка на flex CSS

Адаптивная верстка на flex CSS

На этом уроке мы сделаем адаптивную верстку на flex CSS всего лишь одной секции по PSD макету.

Адаптивная верстка на flex CSS

Прежде чем приступить к верстке, надо произвести анализ макета, предварительно открыв его в графическом редакторе, например в Photoshop. Глядя на макет, сразу представляем себе структуру HTML разметки.

Секция состоит из общего контейнера (wrap), выровненного по центру, внутри которого два разных блока. Верхний блок (header) содержит заголовок и слоган, а в нижнем блоке родителя (section) находятся в свою очередь ещё три блока ребенка (div id="item"). В каждом блоке ребенке есть картинка, подзаголовок, текстовый абзац и кнопка. Все три блока идентичны и их содержимое, как и они сами - отцентрировано.

Так выглядит HTML структура без применения стилей:

Адаптивная верстка на flex CSS

Зачем надо оборачивать все теги общим контейнером wrapper-ом?
Затем, чтобы задать необходимые отступы от окна браузера для элементов сайта.

#wrap {
    width: 80%;
    margin: 5% auto;
    }

Как эти три блока с id #item расположить в ряд?

section {
    display: flex;
    }

Очевидно, что метод верстки на flex CSS, будет применяться к блоку родителю, чтобы его трое детей блоков, встали в ряд и держались там до определенного момента (разрешения экрана). Ведь без применения flexbox-ов, непослушные детки блоки, встанут друг под друга, таково их естественное поведение. А вот когда они это сделают, мы решим позже, когда займёмся адаптивностью под планшеты и мобильные телефоны.

Я сознательно не комментирую весь код, эта статья должна максимально раскрыть тему адаптивной верстки на flex-ах CSS, иначе мы закопаемся в дебрях кода и потеряем главную тему.

Весь HTML код:

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Адаптивная верстка на FLEX CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrap">
   <header>
      <h1>How it works</h1>
      <p>Learn more about our features</p>
   </header>
   <section>
   <div id="item">
      <img src="images/file_icon.png">
      <h2>Easy file managament</h2>
      <p>Fusce ipsum augue, consectetur quis dignissim
eget, malesuada vitae ipsum. Learn more about.
      </p>
      <a href="#">
      <button>Learn More</button>
      </a>
   </div>
   <div id="item">
      <img src="images/calendar_icon.png">
      <h2>Save time and money</h2>
      <p>Praesent porttitor interdum arcu, non lobortis
metus non. Integer pretium mattis nisi.
      </p>
      <a href="#">
      <button>Learn More</button>
      </a>
   </div>
   <div id="item">
      <img src="images/cloud_icon.png">
      <h2>Cloud backup support</h2>
      <p>Integer nec nisl quam. Ut quis sapien ac dolor
congue tristique non consectetur massa.
      </p>
      <a href="#">
      <button>Learn More</button>
      </a>
   </div>
   </section>
</div>
</body>
</html>

CSS код:

@import url("reset.css");
body {
    font-family: 'Open Sans', sans-serif;
    color: #909b9c;
    font-size: 90%;
}
#wrap {
    width: 80%;
    margin: 5% auto;
}
header {
    text-align: center;
    margin-bottom: 50px;
}
header h1 {
    text-transform: uppercase;
    font-weight: 700;
    color: #2c3e50;
    font-size: 210%;
    margin-bottom: 15px;
}
section {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
section #item {
    width: 28%;
    text-align: center;
    padding: 15px;
}
#item img {
    max-width: 100%;
}
#item h2 {
    font-weight: 600;
    font-size: 120%;
    color: #2c3e50;
    margin-top: 40px;
    margin-bottom: 20px;
}
#item p {
    line-height: 20px;
}
button {
    margin-top: 30px;
    background-color: #00bef1;
    border-radius: 50px;
    padding: 15px 35px;
    color: #fff;
    border: none;
    cursor: pointer;
}

Демонстрация HTML страницы: демо

На следующем уроке сделаем нашу верстку адаптивной на flex CSS и анимируем элементы секции.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

shamil shamil 06.04.2018 09:45:41

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

Ответить

porsake porsake 06.04.2018 15:05:02

таблицу обёрнуть в div, с max-width в 100% и overflow: auto. Появится горизонтальная прокрутка, ячейки остаются на своих местах.

Ответить

Silver78 Silver78 27.04.2018 14:58:21

А ниче что у вас в коде три элемента с одинаковым "id"??? это вроде не по феншую?

Ответить

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