<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

Многоколоночный текст на CSS3.

Многоколоночный текст на CSS3.

В этой статье мы поговорим о том, как разбить текст на колонки с помощью CSS3.

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

<html>
<head>
  <title>Multi-columns in CSS3</title>
  <meta charset="utf-8">
</head>
<body>
  <div class="block">
  <h2>Заголовок H2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis alias architecto nulla facilis! Recusandae, sunt, impedit quidem perferendis iste fugit inventore similique aut dolore magnam est quasi quas sit magni commodi reiciendis tempore laudantium blanditiis non at nostrum ut officia enim eum possimus officiis atque excepturi tenetur consequuntur aliquam! Eligendi?</p>
  <h2>Заголовок H2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt, veritatis quas id voluptate eum corrupti saepe voluptas vel nostrum nulla velit maiores fuga molestiae nisi sit esse consectetur nesciunt assumenda minus labore temporibus laborum eius sint corporis. Consectetur, maiores est nisi debitis voluptatibus inventore unde magnam reiciendis placeat aut.</p>
  <h2>Заголовок H2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt, veritatis quas id voluptate eum corrupti saepe voluptas vel nostrum nulla velit maiores fuga molestiae nisi sit esse consectetur nesciunt assumenda minus labore temporibus laborum eius sint corporis. Consectetur, maiores est nisi debitis voluptatibus inventore unde magnam reiciendis placeat aut.</p>
  </div>
</body>
</html>

Итак, у нас есть текст. Чтобы разбить его на 3 колонки, нужно воспользоваться свойством column-count

.block {
  column-count: 3;
}

Также, мы можем указать ширину колонок, тогда их количество будет вычисляться автоматически.

.block {
  column-width: 200px;
}

При помощи свойства colump-gap можно изменять расстояние между колонками.

.block {   column-gap: 100px; }

И, также, с помощью свойства column-rule мы можем ставить разделитель между колонками. Он задаётся так же, как и border.

column-rule: 2px dashed #ccc;

Если мы зададим нашему блоку высоту, то у нас появится горизонтальный скрол. Что логично :)

Вот и всё, что можно рассказать про это свойство. В конце стоит лишь добавить, что поддерживается оно плохо: Internet Explorer начиная с 10 версии, а android вообще не поддерживает. Так что, применяйте его только там, где текст и в одну колонку будет отображаться нормально.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

maxsaenko maxsaenko 17.04.2014 01:18:32

Михаил, здравствуйте. А почему к статьям Вы не прикрепляете примеры... как это выглядит. Было бы намного вкуснее, как для меня! А вообще за материал спасибо!!

Ответить

nashvek nashvek 17.04.2014 02:44:50

Михась, как всегда статья интересная, благодарю! Так держать! Согласен с Максимом, примеры были бы кстати. По поводу примеров, собирался написать тебе на e-mail, но можно и тут. Если добавить функцию к статьям ДЕМО, было бы славно. Успехов!

Ответить

olegvasil olegvasil 17.04.2014 12:07:22

Пожалуйста, напишите статьи про Zend Framework или статьи о том , как создать интерактивные элементы на странице(слайдер , ползунок, фотогаллерею).

Ответить

alexandrdante alexandrdante 19.04.2014 01:38:01

поищите на сайте.Про слайдеры,ползунки и фото галереи есть. Также и в бесплатных курсах)

Ответить

mmgfs mmgfs 20.04.2014 03:05:00

Вот вот, примеров только и не хватает. А то html код написан и ниже ещё какие то кусочки, а как и куда их лепить непонятно.

Ответить

alexandrdante alexandrdante 20.04.2014 03:25:22

какие кусочки?что непонятно? а немного логики,чтобы научиться Если вы не знаете,что такое CSS и HTML и для вас данный,весьма подробный урок - кусочки.Учите,как говорится,матчасть,начиная с первого раздела про HTML и всё по порядку.Уроки построены так,чтобы было понятно,по мере изучения. Тут же,всё понятно. Пример структуры html документа,и свойства стилей css,при помощи которых делается многоколоночный текст.А если вы не понимаете что .block нужно размещать в style.css или в теге <style></style> в html документе,то это уже ваши проблемы. Не разъяснять же в каждом уроке азы. Так что простите,ваша критика неуместна и в дальнейшем такие комментарии как ваш будут удаляться. Благодарю за внимание

Ответить

gordon gordon 23.05.2014 15:49:18

Не работает в Google Chrome

Ответить

alexandrdante alexandrdante 23.05.2014 16:47:29

естественно. Гугл так адаптировал Chromium,что то же самое,как и на Android аналогия.Потому и не работает)

Ответить

gordon gordon 23.05.2014 19:22:33

Но пренебрегать 45% пользователей интернета, использующими гуглохром, как-то не очень красиво

Ответить

alexandrdante alexandrdante 24.05.2014 03:15:52

В данном случае вас никто не просит в обязательном порядке использовать текущие атрибуты.Это всего-лишь урок о свойстве в CSS3.А претензии от 45 процентов пользователей,можете предъявить компании ГУГЛ. Тема закрыта

Ответить

AlexeyS AlexeyS 01.04.2016 20:00:38

Чтоб все заработало, нужно к свойствам приписать следующее: -webkit- (это для гугл хрома) и -moz- (для мазилы). Вот пример: .block { -moz-column-count: 3; /* Для Firefox */ -webkit-column-count: 3; /* Для Safari и Chrome */ column-count: 3; /* Для всех других */ }

Ответить

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