{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В прошлых статьях я представил начальные стили, или даже савсем старые стили для web-страниц (FLOAT) которые сейчас никто не использует, а если и используют, в качестве учебных материеалов, или может быть по удобству их использования. (Имеется ввиду стили выравнивания сетки) Ну дак вот это и были наши первые стили, те самые, которве и использовадись в учебных целях, что-бы посмотреть, как они преображают вновь изготовленную web-страницу. Я взял самые простые и самые первые стили которыми раньше и украшали web-страницы.","type":"unstyled","key":"drjbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас я взял самые современные стили выравнивания сетки (GRID). Вот теперь и посмотрим как это всё выглядит. HTML-разметк а совсем небольшая. Рассмотрим шапку (NAV), лого, название сайта и в ней меню. Затам рассмотрим

...

, затем и - совсем небольшой.","type":"unstyled","key":"fpq51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак представим HTML-разметку","type":"header-three","key":"5helc"},{"data":{"image":{"id":"629a00edf3215677698fb029"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кому интересно, то это редактор atom","type":"atomic:image","key":"97o8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что тут видно в этой html-разметки. Ну первое - это шапка разметки: ","type":"unstyled","key":"boj4r"},{"data":{"image":{"id":"629a038ea32b3a29ac439dc3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начальная шапка разметки до тэга ","type":"atomic:image","key":"1qv9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":7,"style":"BOLD"}],"text":"Кстати - нужен исключительно для адаптивности широких - узких экранов. Ну, что-бы когда экран начинает сворачиваться с ноутбука, до планшета, например, или дальше до смартффона, что-бы внизу не появлялась полоса прокрутки и экран начинал адаптироваться к текущим разрешениям. Вот в этом оно и помогает.","type":"unstyled","key":"8u9v4"},{"data":{"image":{"id":"629a087a68788e62e29d9f4f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это мини-меню которое получается, если изображение получаетса с размером с телефон","type":"atomic:image","key":"c95pe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основное меню отключается и вместо него выскакивает мини-меню","type":"unstyled","key":"d3ujm"},{"data":{"image":{"id":"629a0984f14c8f297b719ae8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эта часть NAV-бара","type":"atomic:image","key":"64jf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь в одной строке собирается LOGO-cайта, название сайта, возможенн поиск и далее основное меню.","type":"unstyled","key":"bp2bm"},{"data":{"image":{"id":"629a0ab0bcc53d7ddff825dd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это контент","type":"atomic:image","key":"2lo0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой части собрался весь контет в тэгах

","type":"unstyled","key":"79q3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну и заканчивается это всё футером (т.е. подвалом)","type":"unstyled","key":"83q9"},{"data":{"image":{"id":"629a0beebcc53d7ddffa9ffd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"