CSS3

Выезжающая панель на чистом CSS

[Код формы вставляется здесь] Слева: #slideout { position: fixed; top: 40px; left: 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout_inner { position: fixed; top: 40px; left: -250px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout:hover { left: 250px; } #slideout:hover #slideout_inner { left: 0; } Справа #slideout { position: fixed; top: 40px; right: 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout_inner { position: fixed; top: 40px; right: -250px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout:hover { right: 250px; } #slideout:hover #slideout_inner { right: 0; }

HTML

Выравниваем блок по центру страницы

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах. Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам. Вариант 1. Отрицательный отступ. Позиционируем блок атрибутами top и left на 50%, и заранее зная…

HTML

Формы в HTML

В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам. Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода. Эти виды взаимодействия включают в себя: • регистрацию и вход на сайтах; • ввод личной информации (имя, адрес, данные кредитной карты и др.); • фильтрацию контента (с помощью выпадающих списков, флажков и др.); • выполнение поиска; • загрузку файлов. Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы: • текстовые поля (для одной или нескольких строк); • переключатели; • флажки; • выпадающие списки; • виджеты для загрузки; • кнопки отправки. Эти элементы…

Уроки HTML

Урок – 6 – Самый простой слайдер

Тут все очень просто, нужно просто добавить UL-список в самое начало сразу после тега body. В списке всего три строки li, то есть слайдер рассчитан на 3 изображения, если нужно больше, то первым шагом будет добавление еще нужного количества строк. Двигаемся дальше. CSS стили Тут наверное самая основная часть работы, так как от CSS, зависит то как будет работать наш слайдер. Открываем файл style.css вашего сайта и добавляем в него следующий код. .body_slides { list-style:none; margin:0; padding:0; z-index:-2; background:#000; } .body_slides, .body_slides:after { position: fixed; width:100%; height:100%; top:0px; left:0px; } .body_slides:after { content: ' '; background: transparent url(images/pattern.png) repeat top…

HTML

Структура HTML5

h1 { color: orange; } h2 { color: green; } h3 { color: blue; } Шапка Главное меню Сайдбар Заголовок Второстепенная информация о статье Сама статья Подвал Тег <article> Описание Тег <article> задает содержание сайта вроде новости, статьи, записи блога, форума или др. Синтаксис <article> </article> Атрибуты Нет. Закрывающий тег Обязателен. Пример <article> История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось. </article> Тег <aside> Описание Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель». Синтаксис <aside>…

HTML

Структура кода

Любой код разметки начинается с доктайпа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. Из всех видов это самый короткий доктайп, его легко запомнить и набирать по памяти. Изменения претерпели и другие теги, так, у тега нет атрибута xmlns, а кодировка документа сократилась до такой записи. Впрочем, старый способ указать кодировку также остался. Атрибут type у тега и можно опустить, браузер автоматически понимает содержимое этих тегов и ему уже не требуется явно об этом напоминать. Простейший код приведён в примере 6.1. Пример 6.1. Код на HTML5 Пример страницы p { color: navy; } Страница на…

HTML

Теги и элементы

.red { color: red; } .green { color: green; } Основа структуры языка HTML это теги. Теги — специальные ключевые слова, обрамленные в скобки < тег >. В основном они "закрываются" . Например: Код HTML: выделим слово курсивом слово В браузере получаем: слово Как видно в примере теги влияют на свое содержимое, а сами не отображаются в браузере. Исключением являются теги не имеющие содержимого, а самомтоятельно выполняющие действие Например: перенос строки горизонтальная линия Одиночные теги называют пустыми, а парные контейнерами. Элементом (или узлом) называют совокупность открывающего и закрывающего тегов вместе с их содержимым, а также пустые теги. Элементы — это…

HTML

Псевдокласс :lang

Определяет язык, который используется в документе или его фрагменте. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах.

HTML

Тег html

Элемент является контейнером, который заключает в себе всё содержимое веб-страницы, включая элементы и . Открывающий и закрывающий теги в документе не обязательны, но хороший стиль диктует непременное их использование. Как правило, идёт в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через . Закрывающий тег всегда стоит в документе последним. Синтаксис Закрывающий тег не обязателен

HTML

С чего начинается HTML

Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа». Тип документа нужен, чтобы браузер мог определить версию HTML и правильно отобразить страницу.Другими словами doctype - это не HTML тег, это инструкция браузеру про версию языка разметки страницы. Возможные doctype: HTML 5 пример: <!DOCTYPE html> HTML 4.01 Strict - включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены. пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional - включает все HTML элементы и атрибуты, вместе с устаревшими презентационными. Фреймсеты не разрешены. пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset -…

Add your widget here