В прошлых статьях я представил начальные стили, или даже савсем старые стили для web-страниц (FLOAT) которые сейчас никто не использует, а если и используют, в качестве учебных материеалов, или может быть по удобству их использования. (Имеется ввиду стили выравнивания сетки) Ну дак вот это и были наши первые стили, те самые, которве и использовадись в учебных целях, что-бы посмотреть, как они преображают вновь изготовленную web-страницу. Я взял самые простые и самые первые стили которыми раньше и украшали web-страницы.
Сейчас я взял самые современные стили выравнивания сетки (GRID). Вот теперь и посмотрим как это всё выглядит. HTML-разметк а совсем небольшая. Рассмотрим шапку (NAV), лого, название сайта и в ней меню. Затам рассмотрим <section><article>...</article></section>, затем <aside>...</aside> и <footer></footer> - совсем небольшой.
Итак представим HTML-разметку
Что тут видно в этой html-разметки. Ну первое - это шапка разметки:
Кстати <mata "vieport".........> - нужен исключительно для адаптивности широких - узких экранов. Ну, что-бы когда экран начинает сворачиваться с ноутбука, до планшета, например, или дальше до смартффона, что-бы внизу не появлялась полоса прокрутки и экран начинал адаптироваться к текущим разрешениям. Вот в этом оно и помогает.
Основное меню отключается и вместо него выскакивает мини-меню
Здесь в одной строке собирается LOGO-cайта, название сайта, возможенн поиск и далее основное меню.
В этой части собрался весь контет в тэгах <section> и <aside>
Ну и заканчивается это всё футером (т.е. подвалом)
Вот как это выглядит без стилей:
Здесь находятся исходники всего этого чуда инженерии: скачать