Задает тип элемента и позволяет менять поведение элемента в потоке, а так же меняет работу некоторых CSS свойств в соответствии с выбранным типом.
display: block;
Пошаговый план! Как быстро научиться создавать сайты!
iOS Safari
Значения
display: значение;
Значения, которые задают тип элементу и влияют на поток элемента в документа: block, inline
Значения, которые определяют как будут располагаться дочерние элементы блока: table, flex, grid
Значения, которые задают тип элемента и работают только если являются дочерними элементами с определенным типом: table-row-group, table-header-group, table-footer-group, table-column-group, table-column, table-caption, table-cell, table-row
Другие значения: inline-block, inline-flex, inline-grid, list-item
display: none;
Элемент скрыт со страницы, как если бы его не было в HTML
.example-1
Источник: htmlbase.ru
HTML уроки. HTML теги. Тег DIV и другие. Уроки HTML CSS JS. Урок №2
Что такое div на ютубе
Элемент (от англ. division — раздел, секция) является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class или id с именем класса или идентификатора.
Как и при использовании других блочных элементов, содержимое всегда начинается с новой строки, после него также добавляется перенос строки.
Синтаксис
Атрибуты
Устаревшие атрибуты
align Задаёт выравнивание содержимого .
Пример
DIV .block1 < width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left; >.block2
Результат данного примера показан на рис. 1.
Рис. 1. Вид блоков, оформленных с помощью стилей
Спецификация
| HTML Living Standard | Живой стандарт |
| HTML 4.01 Specification | Заменённая рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 6 | 12 | 1 | 6 | 1 | 1 |
| 4.4 | 4 | 14 | 1 |
Браузеры
HTML. Урок 15. Тег «div»
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Источник: webref.ru
Рейтинг DLE, как на youtube (раздельные лайки, шкала)
Данным примером хочу показать, как стандартный рейтинг DLE «нравится-не нравится» визуально преобразовать в всякий интересный вид на примере рейтинга Youtube. Самое главное — этот способ не затрагивает файлы движка, полностью совместим с ним, по-сути это и есть стандартный функционал DLE.
Здесь я применю раздельный подсчет лайков, визуальную шкалу соотношений лайков, процентное соотношение лайков. С помощью js мы посчитаем все это, используя rating и vote-num, и применим. Живое голосование будем делать на основе немного измененной стандартной функции DLE. В результате мы получим такой супер рейтинг.
Подробно не буду объяснять, что к чему, просто выложу.
1. в fullstory.tpl в нужное место ставим (замечу, что можно и в shortstory.tpl)
[rating-type-3] «); rating = rating.replace(/); $(«#ratig-layer-» + id).html(rating); $(«#vote-num-id-» + id).html(data.votenum); var rt = parseInt($(rating).text()), m = (data.votenum — rt)/2, p = data.votenum — m, perc = Math.round(p/data.votenum*100), fRate = $(«#frate-» + id); fRate.find(‘.rate-plus span’).html(p); fRate.find(‘.rate-minus span’).html(m); fRate.find(‘.rfill’).css({‘width’:»+perc+’%’>); > else if (data.error) {DLEalert ( data.errorinfo, dle_info );> >, «json»); >;
4. закачиваем картинки лайков в папку images шаблона
Есть нюанс: работает, если был всегда нравится-не нравится или с нуля. Если ранее были звезды или просто один лайк и там наставили оценок, то работать не будет (цифры будут нули), надо обнулять все.
В архиве вы найдете все написанное выше, раскиданное по папкам и файлам.
youtube-rating.rar [3,67 Kb] (cкачиваний: 549)
Еще интересный красочный вариант.
Здесь добавлен вывод процента, который окрашивается в зеленый-красный в зависимости от высокий-низкий.
1. в fullstory.tpl в нужное место ставим
[rating-type-3] ‘);»> ‘);»> 2. в ваш css файл в конец
3. в ваш js файл в конец
$(document).ready(function(){ $(‘.frate’).each(function(){ var rate = $(this), rdata = rate.find(‘.rate-data’), rrate = parseInt(rdata.find(‘.ratingtypeplusminus’).text(), 10), rvote = parseInt(rdata.find(‘span[id*=vote]’).text(), 10); rate.append(‘= rrate rvote > 0 ) { var m = (rvote — rrate)/2, p = rvote — m, perc = Math.round(p/rvote*100); rate.find(‘.rate-plus span.rcount’).html(p); rate.find(‘.rate-minus span.rcount’).html(m); rate.find(‘.rfill’).css({‘width’:»+perc+’%’>); rate.find(‘.rate-perc’).html(»+perc+’%’); perc < 49 ? rate.find(‘.rate-perc’).addClass(‘low’) : rate.find(‘.rate-perc’).addClass(‘high’); >else { rate.find(‘.rate-plus span.rcount’).html(‘0’); rate.find(‘.rate-minus span.rcount’).html(‘0’); >; rate.addClass(‘done’); >); >); function doRateLD( rate, id ) { ShowLoading(»); $.get(dle_root + «engine/ajax/rating.php», { go_rate: rate, news_id: id, skin: dle_skin, user_hash: dle_login_hash >, function(data){ HideLoading(»); if ( data.success ) { var rating = data.rating; rating = rating.replace(/</g, «<«); rating = rating.replace(/>/g, «>»); rating = rating.replace(/); $(«#ratig-layer-» + id).html(rating); $(«#vote-num-id-» + id).html(data.votenum); var rt = parseInt($(rating).text()), m = (data.votenum — rt)/2, p = data.votenum — m, perc = Math.round(p/data.votenum*100), fRate = $(«#frate-» + id); fRate.find(‘.rate-plus span.rcount’).html(p); fRate.find(‘.rate-minus span.rcount’).html(m); fRate.find(‘.rfill’).css({‘width’:»+perc+’%’>); fRate.find(‘.rate-perc’).html(»+perc+’%’); > else if (data.error) {DLEalert ( data.errorinfo, dle_info );> >, «json»); >;
Источник: webrambo.ru