Как создать маркированный список в Weebly?

✅

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

Изменение стиля списка по умолчанию в CSS

Если вы хотите изменить стиль списка по умолчанию, добавьте следующий код в файл «main.less» (старые темы будут иметь «main_style.css»). Мы использовали круг и нижнюю альфа-канал для неупорядоченных и упорядоченных списков соответственно.

div.paragraph ul, div.paragraph ul li {
list-style: circle outside !important; 
}

div.paragraph ol, div.paragraph ol li { 
list-style: lower-alpha outside !important; 
}

Использование значков Font Awesome для маркеров списков

Хотя изменить основную таблицу стилей легко, она ограничивает использование определенного типа маркеров. Простая и рекомендуемая альтернатива – использовать значки с потрясающим шрифтом (или любые другие значки) в качестве маркера в списках. Это дает возможность добавлять неограниченное количество типов иконок в ваши списки. Более того, вы можете использовать разные значки маркеров для одних и тех же неупорядоченных или упорядоченных элементов списка.

Чтобы использовать отличные иконки шрифтов в качестве списка, добавьте приведенный ниже код в раздел «Код заголовка» вашей страницы Weebly:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<style>
.fa-ul {
line-height: 28px;
font-size: 22px;
}
</style>

Атрибуты высоты строки и размера шрифта используются для обеспечения правильного выравнивания значков и текста. Ниже приведено содержимое HTML, которое нужно добавить в элемент «Код для вставки».

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>Check Square</li>
<li><i class="fa-li fa fa-book"></i>Book</li>
<li><i class="fa-li fa fa-bullhorn"></i>Announcement</li>
<li><i class="fa-li fa fa-gear"></i>Settings</li>
<li><i class="fa-li fa fa-home"></i>Home</li>
<li><i class="fa-li fa fa-phone-square"></i>Phone</li>
</ul>

Вот список отличных значков шрифтов для вашей справки, выберите тот, который вы хотите использовать, и замените выделенный класс значков своим собственным. Например, замените «fa-book» на «fa-home», чтобы заменить значок книги на значок дома.

<li><i class="fa-li fa fa-book"></i>Book</li>

Также замените текст своим.

Списки CSS с маркерами изображений

Вы можете использовать CSS, чтобы определить изображение как маркер для элементов списка.

Сначала выберите изображение, которое будет использоваться в качестве маркера, и загрузите его на свой сайт Weebly. Затем добавьте приведенный ниже код в раздел «Код заголовка» своей страницы:

<style>
.bul {
list-style-image: url("/files/theme/Hand.png");
font-size: 24px;
line-height: 32px;
margin-left: 36px;
}
</style>

Здесь «Hand.png» – это изображение, используемое для маркера, а остальные стили предназначены для обеспечения выравнивания содержимого с изображением маркера. Добавьте приведенный ниже HTML-код и опубликуйте сайт, чтобы увидеть маркеры в действии.

<ul class="bul">
<li>JavaScript</li>
<li>CSS</li>
<li>PHP</li>
</ul>

Списки CSS с разными типами маркеров

Вы также можете использовать CSS для создания различных типов маркеров для неупорядоченных и упорядоченных списков.

Добавьте приведенный ниже код CSS в раздел «Код заголовка» своей страницы Weebly.

<style>
.css-list1 {
list-style-type: circle;
}
.css-list2 {
list-style-type: disc;
}
.css-list3 {
list-style-type: upper-roman;
}
.css-list4 {
list-style-type: lower-alpha;
}
.common {
margin-left: 36px;
font-size: 24px;
line-height: 32px;
}
</style>

В этом примере мы создаем четыре разных стиля маркеров – два для неупорядоченных и два для упорядоченных списков с «общими» атрибутами класса для полей, размера шрифта и высоты строки, чтобы обеспечить выравнивание содержимого. Добавьте приведенный ниже HTML-код с помощью элемента «Вставить код» для создания списков с разными стилями маркеров.

<!-- Unordered List with circle -->
<ul class="css-list1 common">
<li>WordPress Development</li>
<li>Weebly Development</li>
<li>Joomla Development</li>
</ul>

<!-- Unordered List with disc -->
<ul class="css-list2 common">
<li>Blog - Latest Updates</li>
<li>Forum - Post Your Opinion</li>
<li>Email - Contact Us</li>
</ul>

<!-- Ordered List with upper-roman -->
<ol class="css-list3 common">
<li>Free Email Support</li>
<li>Free Domain Registration</li>
<li>Free Hosting</li>
</ol>

<!-- Ordered List with lower-alpha -->
<ol class="css-list4 common">
<li>Google</li>
<li>Apple</li>
<li>Microsoft</li>
</ol>

Примечание. Свойство CSS «list-style-type» можно использовать для определения стиля маркера как для упорядоченных, так и для неупорядоченных списков.

Значения для типа стиля списка

Ниже приведен список значений, которые вы можете предоставить для типа list-style-type в CSS.