×

display: none [22/23]

Значение none свойства display используется очень часто. С его помощью можно скрыть элемент, как будто его и не было. Скрытый элемент не отображается и не занимает места на странице.

Данное свойство применяется при создании выпадающих меню, динамических галерей, переключающихся вкладок и много где еще.

Есть еще одно CSS-свойство, которое используется для сокрытия элементов. Это свойство visibility со значением hidden. Оно «прячет» элемент — он становится невидимым, но занимает место на странице.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>display: none</title> </head> <body> <h1>Посещения по городам</h1> <div class="table"> <div class="row"> <div class="cell">Город</div> <div class="cell">Посещения</div> <div class="cell">Страниц</div> <div class="cell">Время</div> </div> <div class="row row-2"> <div class="cell">СПБ</div> <div class="cell">500</div> <div class="cell">6</div> <div class="cell">00:08:05</div> </div> <div class="row"> <div class="cell cell-3-1">МСК</div> <div class="cell">600</div> <div class="cell">5</div> <div class="cell">00:07:05</div> </div> </div> </body> </html>
CSS
div { margin: 5px; padding: 5px; border: 1px dotted white; } .table { display: table; padding: 0; border-spacing: 5px; background: #d9edf7; border-color: #3a87ad; } .row { display: table-row; background: #f2dede; border-color: #b94a48; } .cell { display: table-cell; background: #fbeed5; border-color: #c09853; }
HTML Academy
  1. Скройте элемент с классом row-2 с помощью display.
  2. Затем удалите у row-2 свойство display и скройте элемент с помощью visibility.
  3. Скройте элемент с классом cell-3-1 с помощью display.
  4. Затем удалите у cell-3-1 свойство display и скройте элемент с помощью visibility.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.