Главная
Новости про Интернет
Пользователи в России
Самые популярные запросы
Интернет в мире
Интернет - торговля 2017
Самые популярные клипы Ютуб
Лучшие клипы Ютуб
История ИТ и Интернета
Технологии
Смешное
Закрыть

ИНТЕРНЕТ В РОССИИ И В МИРЕ

3 886 000 000 пользователей
Сегодня Четверг 14.12.2017
Справочники -> Примеры HTML + CSS + jQuery -> Онлайн редактор примеров HTML + CSS + jQuery    Обновление - 21.11.2017

Онлайн редактор примеров HTML + CSS + jQuery

HTML, CSS без jQuery Исходный код
Для демонстрации примера - "Запуск демо"
Редактор Макет - результат
демо или редактирования

Автонумерация элементов HTML при загрузке страницы

Все DIV с одним классом

DIV 1
DIV 2
DIV 3

Три DIV внутри одного DIV с ID

DIV 4
DIV 5
DIV 6

Автонумерация строк таблицы при загрузке страницы

1.Первая ячейка всех строк пустая

буквы строчныеtext-transform:lowercase;
буквы прописныеtext-transform:uppercase;
интервал между буквамиletter-spacing:[значение];

2. Первая ячейка всех строк с текстом

авторское право©
товарный знак®
перенос длинного словаword-wrap:break-word;

Поиск на странице с выделением строки, содержащей ключевое слова

Главное в этом примере элемент HTML5 datalist, селектор jQuery [элемент]:contains("[текст]") и массив JavaScript.

Текст для примера находится в контейнере DIV class="prim2". Строка поиска в форме - datalist со значениями из массива JS. Массив содержит не все слова из текста.

Поиск будет проводится, в том числе по словам, которых нет в массиве или по части слова. Например при вводе "черк" будут найдены строки с вхождением "черк" в слова: зачеркивание, подчеркивание.

В примере представлены вместе 2 варианта поиска:
1. В тексте останутся только строки, где есть ключевое слово.
2. Эти строки будут скопированы в DIV под формой поиска. Все строки в исходном тексте разделены запятой - для split(','). Запятая выбрана как наименее употребляемый символ для этой темы текста.
Очень просто реализовать 3-й вариант: В тексте останутся все строки, а те в которых есть ключевое слово будут выделены красным.

Текст для поиска:

перенос длинного слова - word-wrap:break-word,

межстрочный интервал - line-height:[значение, напр. 1.5;],

с красной строки (отступ слева) - text-indent:[значение],

зачеркивание - text-decoration:line-through,

подчеркивание - text-decoration:underline,

линия над текстом - text-decoration:overline,

подстрочный текст - <sub></sub>,

надстрочный текст - <sup></sup>,


1
2
3

Поделиться:

Наверх
   
Яндекс цитирования
При любом использовании материалов сайта прямая ссылка на http://www.bizhit.ru/ обязательна. © 2010 - 2017 гг. Материал сайта, в том числе реклама, не является публичной офертой.
Архив сайта    Обратная связь

Администрация сайта:
Не гарантирует точности и полноты предоставленных материалов. До принятия каких-либо решений уточните информацию из официальных источников.
Не контролирует и не несет ответственность за сайты третьих лиц, на которые посетитель bizhit.ru может перейти по ссылкам, доступным на сайте. На таких сайтах у пользователя может собираться или запрашиваться персональная информация, а также могут совершаться иные действия.

Реклама внизу страниц сайта от хостинг - провайдера.
Сделать бесплатный сайт с uCoz