W3.CSS Панели
Я панель.
Я панель.
Я контейнер.
Я контейнер.
Класс панели
Класс w3-panel добавляет верхний и нижний поля (margin) размером 16px и отступ слева и справа в 16px для любого элемента HTML.
Панели для заметок
Класс 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>
Попробуйте сами »
