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 Замітки на нашому сайті W3Schools українською.
Панелі для цитат
Клас w3-panel ідеально підходить для відображення цитат.
Приклад
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Зробіть це якомога простіше, але не примітивно."</i></p>
</div>
Спробуйте самі »
Щоб дізнатись більше про цитати W3.CSS, відвідайте розділ W3.CSS Цитати на нашому сайті W3Schools українською.
Панелі для оповіщень
Клас w3-panel ідеально підходить для відображення оповіщень (попереджень).
Оповіщення часто відображаються з використанням сильного (насиченого) кольору:
Небезпека!
Червоний колір часто вказує на небезпечну або негативну ситуацію.
Приклад
<div class="w3-panel w3-red">
<h3>Небезпека!</h3>
<p>Червоний колір часто вказує на небезпечну або негативну ситуацію.</p>
</div>
Спробуйте самі »
Щоб дізнатись більше про оповіщення (попередження) W3.CSS, відвідайте розділ W3.CSS Оповіщення на нашому сайті W3Schools українською.
Панелі як картки
Лондон - найбільш густонаселене місто в Сполученному Королівстві, з населенням понад 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>
Спробуйте самі »
