ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
W3CSS. Уроки для начинающих

W3.CSS Панели


Я панель.

Я панель.

Я контейнер.

Я контейнер.


Класс панели

Класс w3-panel добавляет верхний и нижний поля (margin) размером 16px и отступ слева и справа в 16px для любого элемента HTML.

Пример

<div class="w3-panel w3-red">
  <p>I am a panel.</p>
</div> 
Попробуйте сами »

Панели для заметок

Класс w3-panel идеально подходит для отображения заметок.

Заметки часто отображаются бледным цветом:

Лондон - самый густонаселенный город в Соединенном Королевстве, с населением более 9 миллионов человек.

Пример

<div class="w3-panel w3-pale-green">
  <p>Лондон - самый густонаселенный город в Соединенном Королевстве, с населением более 9 миллионов человек.</p>
</div>
Попробуйте сами »

Чтобы узнать больше о W3.CSS заметках, пожалуйста, посетите раздел W3.CSS Заметки на нашем сайте.


Панели для цитат

Класс w3-panel идеально подходит для отображения цитат.

"Сделайте это как можно проще, но не примитивно."

Пример

<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
  <p><i>"Сделайте это как можно проще, но не примитивно."</i></p>
</div> 
Попробуйте сами »

Чтобы узнать больше о цитатах W3.CSS, посетите раздел W3.CSS Цитаты на нашем сайте.


Панели для оповещений

Класс w3-panel идеально подходит для отображения оповещений (предупреждений).

Оповещения часто отображаются с использованием сильного (насыщенного) цвета:

Опасность!

Красный часто указывает на опасную или негативную ситуацию.

Пример

<div class="w3-panel w3-red">
  <h3>Опасность!</h3>
  <p>Красный часто указывает на опасную или негативную ситуацию.</p>
</div>
Попробуйте сами »

Чтобы узнать больше об оповещениях (предупреждениях) W3.CSS, посетите раздел W3.CSS Оповещения на нашем сайте.


Панели как открытки

Лондон - самый густонаселенный город в Соединенном Королевстве, с населением более 9 миллионов человек.

Пример

<div class="w3-panel w3-blue w3-card-4">
  <p>Лондон - самый густонаселенный город в Соединенном Королевстве, с населением более 9 миллионов человек.</p>
</div>
Попробуйте сами »

Округлые панели

Лондон - самый густонаселенный город в Соединенном Королевстве, с населением более 9 миллионов человек.

Пример

<div class="w3-panel w3-blue w3-round-xlarge">
  <p>Лондон - самый густонаселенный город в Соединенном Королевстве, с населением более 9 миллионов человек.</p>
</div>
Попробуйте сами »

Панель Скрыть (Закрыть)

Скрывать панель легко.

×

Нажмите на X, чтобы закрыть эту панель.

Нажмите на X, чтобы закрыть эту панель.

Пример

<div class="w3-panel w3-display-container">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-topright">X</span>
  <p>Нажмите на X, чтобы закрыть эту панель.</p>
  <p>Нажмите на X, чтобы закрыть эту панель.</p>
</div>
Попробуйте сами »

Панель Показать (Открыть)

Показать (скрытую) панель легко:

Пример

<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Показать панель</button>

<div id="id01" class="w3-panel w3-green w3-display-container" style="display:none">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-topright">X</span>
  <p>Нажмите на X, чтобы закрыть эту панель.</p>
  <p>Нажмите на X, чтобы закрыть эту панель.</p>
</div>
Попробуйте сами »