Редактор HTML/CSS кода с предварительным просмотром

17518 0 11 2
15px
  • 12px
  • 13px
  • 14px
  • 15px
  • 16px
  • 17px
  • 18px
  • 19px
  • 20px
    textmate
    • textmate
    • monokai
    • twilight
    • chrome
    • xcode
    • cobalt
      ?
      400
      50
      Копировать
      Сохранить в html
      Сохранить в pdf
      Печать
      Форматировать
      Очистить
      <!DOCTYPE html> <html> <head> <title>Пример макета</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=.0" /> <style> body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; } header { background: #eee; padding: 20px; } main { flex: 1; padding: 20px; } footer { background: #ddd; padding: 20px; } .container { max-width: 1000px; width: 100%; margin: 0 auto; } .max400 { display:none } @media only screen and (max-width: 400px) { .min400 { display:none; } .max400 { display:block; color:red; font-size:20px } } </style> </head> <body> <header> <div class="container"> <h1>Шапка сайта</h1> </div> </header> <main> <div class="container"> <div class="min400"> <p>Контент страницы при ширине больше 400 px.</p> </div> <div class="max400"> <p>Контент страницы при ширине меньше 400 px</p> </div> </div> </main> <footer> <div class="container"> Подвал сайта </div> </footer> </body> </html>

      Онлайн редактор HTML/CSS кода с предварительным просмотром.

      Возможности:

      1. Форматирование (украшение кода);
      2. История редактирования, можно в любой момент вернуться назад. Максимум 50 последних изменений;
      3. Сохранение в файла как .html;
      4. Сохранение в файла как .pdf;
      5. Функция печати макета;
      6. Горизонтальное или вертикальное отображение окон редактирования или предосмотра;
      7. Настройка высоты и ширины окон;
      8. Возможность предварительного просмотра мобильной версии;
      9. Подсказки при наборе кода;
      10. Динамический выбор цвета или фона;
      11. Готовые сниппеты;
      12. Автозакрытие тегов;
      13. 6 тем оформления редактора;
      14. Поиск и замена в коде;
      15. Предосмотр мобильной версии;

      JavaScript в предосмотре не выполняется. При закрытии или обновлении текущей страницы, код в редакторе и история будут сброшены.

      Редактор может потребоваться для следующих целей:

      1. Разработка и дизайн веб-сайтов. Такой редактор позволяет писать HTML и CSS код, и сразу видеть результат – как будут отображаться элементы на странице. Это удобно при верстке и стилизации сайтов.
      2. Создание и редактирование HTML email-рассылок. Предпросмотр нужен, чтобы увидеть, как будет выглядеть письмо в разных почтовых клиентах и на мобильных устройствах.
      3. Обучение HTML и CSS. Визуальный редактор упрощает изучение и эксперименты с кодом для новичков.
      4. Быстрая разработка прототипов интерфейсов. Предпросмотр позволяет оперативно создавать макеты и прототипы для дальнейшей разработки.
      5. Редактирование и оптимизация существующих HTML/CSS-файлов. Удобнее вносить правки с предпросмотром.
      6. Создание профессионально оформленных документов: Вы можете использовать HTML редактор для создания документов с богатым форматированием, включая стили, изображения, таблицы и другие элементы. После редактирования вы сможете сохранить документ в формате PDF, который обеспечивает сохранение оригинального внешнего вида и форматирования.
      7. Подготовка презентаций и отчетов: Вы можете использовать HTML редактор для создания презентаций или отчетов с помощью HTML и CSS. Затем, сохраняя их в формате PDF, вы получаете документ, который может быть легко распространен и просмотрен на различных устройствах без необходимости установки дополнительного программного обеспечения.
      8. И другие задачи, где нужна визуальная разработка и отображение HTML/CSS кода.

      При создании pdf документов не рекомендуется использовать инлайн стили и display:flex, также не поддерживаются вложенные селекторы, к примеру: header .container { }

      Поделиться:
      11
      2
      Комментарии
      Еще нет комментариев
      Добавить комментарий
      Сообщения ошибках, пожелания по улучшению инструмента и т.д. оставляйте в комментариях.