Панели W3.CSS
Я панель.
Я панель.
Я контейнер.
Я контейнер.
Класс панели
Класс w3-panel добавляет к любому элементу HTML верхнее и нижнее поле по 16 пикселей, а также отступы по 16 пикселей слева и справа.
Пример
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Панели для заметок
Класс w3-panel идеально подходит для отображения заметок.
Заметки часто отображаются бледным цветом:
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Пример
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Чтобы узнать больше о W3.CSS Notes, посетите главу W3.CSS Notes .
Панели для цитат
Класс w3-panel идеально подходит для отображения котировок.
Пример
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
Чтобы узнать больше о W3.CSS Quotes, посетите главу W3.CSS Quotes .
Панели для оповещений
Класс w3-panel идеально подходит для отображения предупреждений.
Оповещения часто отображаются с использованием яркого цвета:
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Пример
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Чтобы узнать больше об оповещениях W3.CSS, посетите главу Оповещения W3.CSS .
Панели как карты
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Пример
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Закругленные панели
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Пример
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</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>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
Показать (открыть) панель
Показать (скрытую) панель легко:
Пример
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</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>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>