W3.CSS

W3.CSS ГЛАВНАЯ Введение в W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS W3.CSS Границы Карточки W3.CSS W3.CSS по умолчанию W3.CSS-шрифты W3.CSS Google Текст 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 Цветной интерфейс Metro W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Цветовая мода Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов W3.CSS

Веб-строительство

Веб-введение Веб-HTML Веб-CSS Веб-JavaScript Веб-макет Веб-группа Веб-кейтеринг Интернет-ресторан Веб-архитектор

Примеры

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

использованная литература

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

Панели 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>