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


9 6 8 33 66 99


Классы значков W3.CSS

W3.CSS предоставляет только один класс для значков:

Класс Определяет
w3-значок Круглый черный значок

Значки

Класс w3-badge создает круглый значок. Цвет по умолчанию черный.

Обновления 9

Пример

<p>Updates <span class="w3-badge">9</span></p>

Цветные значки

Используйте класс w3- color , чтобы изменить цвет значка:

Новости 6Комментарии 8

Пример

<p>News <span class="w3-badge w3-green">6</span></p>
<p>Comments <span class="w3-badge w3-red">8</span></p>


Значки в кнопках

Класс w3-badge можно использовать внутри других элементов:

Пример

<p><button class="w3-btn w3-black">Button
<span class="w3-badge w3-margin-left w3-white">1</span>
</button></p>

<p><button class="w3-btn w3-red">Button
<span class="w3-badge w3-margin-left">2</span>
</button></p>

Значки в списках

  • 1 Джилл
  • 2 канун
  • 3 Адам

Пример

<ul class="w3-ul">
  <li><span class="w3-badge">1</span> Jill</li>
  <li><span class="w3-badge">2</span> Eve</li>
  <li><span class="w3-badge">3</span> Adam</li>
</ul>

Класс w3-right перемещает элемент вправо.

Это идеально подходит для списков со значками:

  • Джилл 1
  • канун 2
  • Адам 3

Пример

<ul class="w3-ul w3-border">
  <li>Jill <span class="w3-badge w3-right w3-margin-right">1</span></li>
  <li>Eve <span class="w3-badge w3-right w3-margin-right">2</span></li>
  <li>Adam <span class="w3-badge w3-right w3-margin-right">3</span></li>
</ul>

Значки в таблицах

Имя Фамилия Точки
Джилл Смит 50
канун Джексон 1 94
Адам Джонсон 2 67
Бо Нильссон 50
Майк Росс 35

Пример

<tr>
  <td>Eve</td>
  <td>Jackson <span class="w3-badge">1</span></td>
  <td>94</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson <span class="w3-badge">2</span></td>
  <td>67</td>
</tr>

Размеры значков

По умолчанию значок наследует размер своего контейнера.

Классы размера w3 (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) можно использовать для изменения размера значка:

6 6 6

66 66 66

66 66

Возможно, вы захотите добавить дополнительные отступы к большим значкам:

Пример

<span class="w3-badge w3-jumbo w3-red">66</span>
<span class="w3-badge w3-jumbo w3-red w3-padding">66</span>

Значки UTF-8

Поскольку HTML5 поддерживает набор символов UTF-8, вы можете использовать дингбаты для однозначных значков.

❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉
❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉

Пример

<div class="w3-xxlarge">
&#x2776; &#x2777; &#x2778; &#x2779; &#x277A; &#x2785; &#x2786; &#x2787; &#x2788; &#x2789;
</div>

<div class="w3-xxlarge w3-text-red">
&#x2776; &#x2777; &#x2778; &#x2779; &#x277A; &#x2785; &#x2786; &#x2787; &#x2788; &#x2789;
</div>