{"draftJsState":{"blocks":[{"data":{"image":{"id":"67c5a3b991d8735adf6cc44c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3g2gn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ac5v8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эта тема объединяет методы создания интерактивных элементов, которые повышают удобство использования сайта.","type":"unstyled","key":"7b8uu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.1. Как сделать модальное окно?","type":"header-two","key":"2aklr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"2t24s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"unstyled","key":"fq14b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"6vapd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Кнопка открытия:\nПри клике меняется стиль элемента с id \"modal\" на display: block, делая окно видимым.","type":"unordered-list-item","key":"ehhk6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Модальное окно:\nСтилизация с использованием CSS для позиционирования и оформления.","type":"unordered-list-item","key":"1edjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Кнопка закрытия:\nВозвращает окно в исходное состояние (display: none).","type":"unordered-list-item","key":"et1et"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"cakji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили модального окна можно вынести в отдельный CSS-файл.","type":"unordered-list-item","key":"c5eab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте обработку закрытия окна по клику вне его для улучшения UX.","type":"unordered-list-item","key":"480iu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.2. Как сделать слайдер изображений?","type":"header-two","key":"duase"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода (упрощённый):","type":"header-three","key":"69dpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n","type":"unstyled","key":"a19cm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"32jsh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Контейнер с фиксированной шириной:\n

скрывает лишние слайды.","type":"unordered-list-item","key":"frnok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Flexbox:\nВложенный блок выстраивает слайды в один ряд.","type":"unordered-list-item","key":"6d1ir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Переход:\nCSS-свойство transition обеспечивает плавное переключение.","type":"unordered-list-item","key":"eglp4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Кнопка переключения:\nJavaScript изменяет значение transform, чтобы показать следующий слайд.","type":"unordered-list-item","key":"c1f1q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"255r6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для полноценного слайдера используйте JS для управления индексом слайда.","type":"unordered-list-item","key":"c0bka"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте библиотеки для создания более сложных слайдеров.","type":"unordered-list-item","key":"a6s08"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.3. Как сделать кнопки «Назад» и «Вверх»?","type":"header-two","key":"7v3gg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примеры кода:","type":"header-three","key":"8oj9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Кнопка «Назад»:","type":"unstyled","key":"dld0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c64nf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Кнопка «Вверх»:","type":"unstyled","key":"bkr7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"rod0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"8439g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"window.history.back() – функция, возвращающая пользователя на предыдущую страницу.","type":"unordered-list-item","key":"b75cs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"window.scrollTo({ top: 0, behavior: 'smooth' }); – осуществляет плавную прокрутку страницы вверх.","type":"unordered-list-item","key":"70dq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"25b7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Размещайте эти кнопки в удобных местах страницы для улучшения навигации.","type":"unordered-list-item","key":"4osdq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стилизация кнопок через CSS может повысить их заметность.","type":"unordered-list-item","key":"3v6v4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.4. Как сделать выпадающее меню?","type":"header-two","key":"1bc9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода (простой):","type":"header-three","key":"3mn90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6vkbq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"2t2hs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"