Как добавить текстовые метки на сайт Weebly? »WebNots

Ярлыки используются для выделения фона текста другим цветом, чтобы привлечь внимание пользователя. Например, вы можете выделить текст предупреждения красным цветом за пределами вашего сайта, чтобы указать на важность предупреждающих сообщений без необходимости добавления дополнительных уведомлений. Использовать такие текстовые метки в Weebly очень просто с помощью элемента «Вставить код» и кода CSS. В этой статье мы обсудим пошаговое руководство по добавлению текстовых меток на сайт Weebly вместе с кодом CSS.

Мы объясним с помощью пяти разных цветовых меток, вы можете использовать один цвет или добавить столько цветов, сколько вам нужно для вашего сайта. Прежде чем перейти к приведенному ниже коду, приведем пример текстовых таблиц, о которых мы говорим:

Метка по умолчанию Это метка по умолчанию, и абзац продолжается… Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod Информационная этикетка tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнения ullamco labouris nisi ut Этикетка опасности аликвип экс еа коммодо конскват. Duis aute irure dolor в репреендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Предупреждающая этикетка Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.

Метка по умолчанию Это метка по умолчанию.
Информационная этикетка Это информационная этикетка.
Метка успеха Это ярлык успеха.
Предупреждающая этикетка Это предупреждающая этикетка.
Этикетка опасности Это знак опасности.

Ярлыки можно использовать либо в однострочном абзаце, либо где угодно в бегущем абзаце.

CSS-код для этикеток

Мы определим код CSS для базовой метки, как показано ниже, без какого-либо цвета, это поможет создать столько же цветов отдельно, как и базовый код метки.

.label {
    padding: 5px;
    line-height: 2;
    color: #ffffff;
    border-radius: 4px;
}

В этом примере мы определим следующие пять цветовых меток — по умолчанию, информация, успех, предупреждение и опасность.

.label-default {
    background-color: #b3b3b3;
}
.label-info {
    background-color: #5bc0de;
}
.label-success {
    background-color: #5cb85c;
}
.label-warning {
    background-color: #f0ad4e;
}
.label-danger {
    background-color: #d9534f;
}

Добавление полного кода CSS для ваших этикеток должно быть таким, как показано ниже. Вы можете добавить этот код в свой main_style.css (уровень сайта) или раздел кода заголовка страницы (уровень страницы) или внутри элемента кода внедрения (уровень элемента) в зависимости от ваших потребностей. Если вы ищете, как добавить код CSS на свой сайт Weebly, ознакомьтесь с возможностями в этой статье.

<style>
.label {
    padding: 5px;
    line-height: 2;
    color: #ffffff;
    border-radius: 4px;
}
.label-default {
    background-color: #b3b3b3;
}
.label-info {
    background-color: #5bc0de;
}
.label-success {
    background-color: #5cb85c;
}
.label-warning {
    background-color: #f0ad4e;
}
.label-danger {
    background-color: #d9534f;
}
</style>

Не включайте теги