ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

W3.CSS Отображение / Display


Классы отображения (display) позволяют отображать элементы HTML в определенных позициях внутри других элементов HTML:

Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle

W3.CSS Классы отображения

W3.CSS предоставляет следующие классы отображения:

Класс Определяет
w3-display-container Контейнер для w3-display-классов
w3-display-topleft Отображает содержимое в верхнем левом углу w3-display-container
w3-display-topright Отображает содержимое в верхнем правом углу w3-display-container
w3-display-bottomleft Отображает содержимое в левом нижнем углу w3-display-container
w3-display-bottomright Отображает содержимое в правом нижнем углу w3-display-container
w3-display-left Отображает содержимое слева (посередине слева) w3-display-container
w3-display-right Отображает содержимое справа (посередине справа) w3-display-container
w3-display-middle Отображает содержимое в середине (в центре) w3-display-container
w3-display-topmiddle Отображает содержимое в верхней середине w3-display-container
w3-display-bottommiddle Отображает содержимое в нижней середине w3-display-container
w3-display-position Отображает содержимое в указанной позиции в контейнере w3-display-container
w3-display-hover Отображает содержимое при наведении курсора внутри w3-display-container
w3-left Плавающий элемент влево (float: left)
w3-right Плавающий элемент вправо (float: right)
w3-show Показывает элемент (display: block)
w3-hide Скрывает элемент (display: none)
w3-mobile Добавляет адаптивность любых элементов в первую очередь для мобильных устройств.
Отображает элементы в виде блочных элементов на мобильных устройствах

Примеры

Пример

<div class="w3-display-container w3-green" style="height:300px;">
  <div class="w3-display-topleft">Top Left</div>
  <div class="w3-display-topright">Top Right</div>
  <div class="w3-display-bottomleft">Bottom Left</div>
  <div class="w3-display-bottomright">Bottom Right</div>
  <div class="w3-display-left">Left</div>
  <div class="w3-display-right">Right</div>
  <div class="w3-display-middle">Middle</div>
  <div class="w3-display-topmiddle">Top Mid</div>
  <div class="w3-display-bottommiddle">Bottom Mid</div>
</div>
Попробуйте сами »

Тот же пример, что и выше, с добавленным внутренним отступом (padding):

Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle

Пример

<div class="w3-display-container w3-green" style="height:300px;">
  <div class="w3-padding w3-display-topleft">Top Left</div>
  <div class="w3-padding w3-display-topright">Top Right</div>
  <div class="w3-padding w3-display-bottomleft">Bottom Left</div>
  <div class="w3-padding w3-display-bottomright">Bottom Right</div>
  <div class="w3-padding w3-display-left">Left</div>
  <div class="w3-padding w3-display-right">Right</div>
  <div class="w3-padding w3-display-middle">Middle</div>
  <div class="w3-padding w3-display-topmiddle">Top Mid</div>
  <div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
Попробуйте сами »

Отображение текста внутри изображения:

Lights
Top Left
Top Right
Bottom Left
Bottom Right
Top Mid
Left
Right
Middle
Bottom Mid

Пример

<div class="w3-display-container">
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <div class="w3-padding w3-display-topleft">Top Left</div>
  <div class="w3-padding w3-display-topright">Top Right</div>
  <div class="w3-padding w3-display-bottomleft">Bottom Left</div>
  <div class="w3-padding w3-display-bottomright">Bottom Right</div>
  <div class="w3-padding w3-display-topmiddle">Top Mid</div>
  <div class="w3-padding w3-display-left">Left</div>
  <div class="w3-padding w3-display-right">Right</div>
  <div class="w3-padding w3-display-middle">Middle</div>
  <div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
Попробуйте сами »

Отображение при наведении

Класс w3-display-hover отображает содержимое при наведении курсора внутри w3-display-container (переход от скрытого к показанному).

Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Наведите курсор мыши на этот блок!
Top Mid
Bottom Mid

Пример

<div class="w3-display-container w3-light-grey" style="height:300px;">
  <div class="w3-display-topleft w3-display-hover">Top Left</div>
  <div class="w3-display-topright w3-display-hover">Top Right</div>
  <div class="w3-display-bottomleft w3-display-hover">Bottom Left</div>
  <div class="w3-display-bottomright w3-display-hover">Bottom Right</div>
  <div class="w3-display-left w3-display-hover">Left</div>
  <div class="w3-display-right w3-display-hover">Right</div>
  <div class="w3-display-middle">Наведите курсор мыши на этот блок!</div>
  <div class="w3-display-topmiddle w3-display-hover">Top Mid</div>
  <div class="w3-display-bottommiddle w3-display-hover">Bottom Mid</div>
</div>
Попробуйте сами »

Классы w3-display-hover можно комбинировать с классами эффектов и анимации для создания крутых эффектов при наведении:

Avatar
Pants
Khaki pants, $19.99

Пример

 <div class="w3-display-container w3-hover-opacity">
  <img src="img_avatar.png" alt="Avatar">
  <div class="w3-display-middle w3-display-hover">
    <button class="w3-button w3-black">John Doe</button>
  </div>
</div>
Попробуйте сами »

Вы узнаете больше об анимации и эффектах позже в этом учебнике.


Отображение флага

Приложив немного воображения, w3-display-классы можно использовать для создания флага:

Пример

<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
  <div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
  <div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
  <div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
  <div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
</div>
Попробуйте сами »

Плавающие классы / Float

Класс w3-left перемещает элемент влево, класс w3-right перемещает элемент вправо:

w3-left
w3-right

Пример

<div class="w3-bar w3-light-grey">
  <div class="w3-left w3-red">w3-left</div>
  <div class="w3-right w3-blue">w3-right</div>
</div>
Попробуйте сами »

Примечание: Clear float происходит с помощью класса w3-clear или помещение их в контейнер w3-container, как в примере выше (очищает float автоматически).


Скрыть и показать

Принудительное отображение или скрытие элемента с помощью класса w3-show или w3-hide.

Пример

<p class="w3-show">Я отображаюсь (display: block).</p>
<p class="w3-hide">Я скрываюсь (display: none).</p>
Попробуйте сами »

Эти классы часто используются для переключения между скрытием и отображением элементов:

Пример

Hello!

Попробуйте сами »

Класс w3-mobile

Класс w3-mobile добавляет mobile-first адаптивность любому элементу.

Он добавляет display: block и width: 100% к элементу на экранах шириной менее 600 пикселей.

Пример

<button class="w3-button w3-mobile">Link</button>
Попробуйте сами »