WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения 055-966-10-17
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Регистрация на сайте

CSS3 адаптивные блоки (Flex Box Model)

Несколько примеров, используя разные CSS свойства


HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Multicolumns</title> <style> div{ background-color: #EEE; } #colTest1{ columns: 2; } #colTest2{ columns: 3; column-rule: 1px dotted red; } #colTest3{ width: 100%; display: flex; flex-flow: row; } .col1{ margin: 20px; } #colTest4 { display: grid; grid-template-columns: 200px 1fr 300px; } #colTest4 .col1:last-child{ grid-column: 1 / 4; } </style> </head> <body> <h1>Используя CSS свойство columns</h1> <p id="colTest1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda maxime aspernatur aliquam repellendus tenetur eum expedita minima labore, error ex magni, qui alias reprehenderit, perferendis cumque dolor nihil veniam molestiae. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad atque expedita, minima ipsum facilis commodi cum eos dolor quae odit. Voluptatem aperiam veniam, illo adipisci fugiat facere consequatur expedita assumenda?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quod ex aut consequuntur dolorem et laborum error quidem iure nulla a, vel distinctio pariatur repellendus aliquid hic illum recusandae placeat?Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias veniam nisi cum. Culpa sit architecto ipsa optio sed nemo hic, laborum atque nihil quos velit suscipit obcaecati numquam amet vero! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero quas adipisci placeat quibusdam aliquam ratione mollitia alias totam libero dolores cum, modi animi vitae? Dolorem corrupti accusantium odit quaerat maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. In iusto explicabo recusandae consectetur eos, temporibus laudantium hic eligendi pariatur similique soluta maxime ipsum tenetur, accusamus facilis dolores quae vel mollitia! </p> <p id="colTest2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda maxime aspernatur aliquam repellendus tenetur eum expedita minima labore, error ex magni, qui alias reprehenderit, perferendis cumque dolor nihil veniam molestiae. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad atque expedita, minima ipsum facilis commodi cum eos dolor quae odit. Voluptatem aperiam veniam, illo adipisci fugiat facere consequatur expedita assumenda?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quod ex aut consequuntur dolorem et laborum error quidem iure nulla a, vel distinctio pariatur repellendus aliquid hic illum recusandae placeat?Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias veniam nisi cum. Culpa sit architecto ipsa optio sed nemo hic, laborum atque nihil quos velit suscipit obcaecati numquam amet vero! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero quas adipisci placeat quibusdam aliquam ratione mollitia alias totam libero dolores cum, modi animi vitae? Dolorem corrupti accusantium odit quaerat maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. In iusto explicabo recusandae consectetur eos, temporibus laudantium hic eligendi pariatur similique soluta maxime ipsum tenetur, accusamus facilis dolores quae vel mollitia! </p> <hr> <h1>Используя CSS FLEX</h1> <div id="colTest3"> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> </div> <hr> <h1>Используя CSS GRID</h1> <div id="colTest4"> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> </div> </body> </html>