x
<html lang="ru"><head><title>CSS Шаблон</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>* { box-sizing: border-box;}body { font-family: Arial, Helvetica, sans-serif;}/* Стиль заголовка */header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white;}/* Контейнер для флексбоксов */section { display: -webkit-flex; display: flex;}/* Стиль меню навигации */nav { -webkit-flex: 1; -ms-flex: 1; flex: 1; background: #ccc; padding: 20px;}/* Стиль списка в меню */nav ul { list-style-type: none; padding: 0;}/* Стиль контента */article { -webkit-flex: 3; -ms-flex: 3; flex: 3; background-color: #f1f1f1; padding: 10px;}/* Стиль раздела footer */footer { background-color: #777; padding: 10px; text-align: center; color: white;}/* Адаптивный макет - меню и содержимое (внутри раздела) располагаются друг над другом, а не рядом друг с другом. */@media (max-width: 600px) { section { -webkit-flex-direction: column; flex-direction: column; }}</style></head><body><h2>CSS Макет Flexbox</h2><p>В этом примере мы создали заголовок, два столбца / поля и нижний колонтитул. На небольших экранах столбцы будут накладываться друг на друга.</p><p>Измените размер окна браузера, чтобы увидеть эффект адаптивности.</p><p><strong>Примечание:</strong> Flexbox не поддерживается в Internet Explorer 10 и более ранних версиях.</p><header> <h2>Cities</h2></header><section> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article></section><footer> <p>Footer</p></footer></body></html>