<!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 кода с предварительным просмотром.
Возможности:
- Форматирование (украшение кода);
- История редактирования, можно в любой момент вернуться назад. Максимум 50 последних изменений;
- Сохранение в файла как .html;
- Сохранение в файла как .pdf;
- Функция печати макета;
- Горизонтальное или вертикальное отображение окон редактирования или предосмотра;
- Настройка высоты и ширины окон;
- Возможность предварительного просмотра мобильной версии;
- Подсказки при наборе кода;
- Динамический выбор цвета или фона;
- Готовые сниппеты;
- Автозакрытие тегов;
- 6 тем оформления редактора;
- Поиск и замена в коде;
- Предосмотр мобильной версии;
JavaScript в предосмотре не выполняется. При закрытии или обновлении текущей страницы, код в редакторе и история будут сброшены.
Редактор может потребоваться для следующих целей:
- Разработка и дизайн веб-сайтов. Такой редактор позволяет писать HTML и CSS код, и сразу видеть результат — как будут отображаться элементы на странице. Это удобно при верстке и стилизации сайтов.
- Создание и редактирование HTML email-рассылок. Предпросмотр нужен, чтобы увидеть, как будет выглядеть письмо в разных почтовых клиентах и на мобильных устройствах.
- Обучение HTML и CSS. Визуальный редактор упрощает изучение и эксперименты с кодом для новичков.
- Быстрая разработка прототипов интерфейсов. Предпросмотр позволяет оперативно создавать макеты и прототипы для дальнейшей разработки.
- Редактирование и оптимизация существующих HTML/CSS-файлов. Удобнее вносить правки с предпросмотром.
- Создание профессионально оформленных документов: Вы можете использовать HTML редактор для создания документов с богатым форматированием, включая стили, изображения, таблицы и другие элементы. После редактирования вы сможете сохранить документ в формате PDF, который обеспечивает сохранение оригинального внешнего вида и форматирования.
- Подготовка презентаций и отчетов: Вы можете использовать HTML редактор для создания презентаций или отчетов с помощью HTML и CSS. Затем, сохраняя их в формате PDF, вы получаете документ, который может быть легко распространен и просмотрен на различных устройствах без необходимости установки дополнительного программного обеспечения.
- И другие задачи, где нужна визуальная разработка и отображение HTML/CSS кода.
При создании pdf документов не рекомендуется использовать инлайн стили и display:flex, также не поддерживаются вложенные селекторы, к примеру: header .container { }