TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

14

теги. Неупорядоченные списки используют диск как стиль списка, а упорядоченные списки используют десятичный стиль для маркеров. В 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?

Чтобы использовать отличные иконки шрифтов в качестве списка, добавьте приведенный ниже код в раздел «Код заголовка» вашей страницы 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?

Сначала выберите изображение, которое будет использоваться в качестве маркера, и загрузите его на свой сайт 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 для создания различных типов маркеров для неупорядоченных и упорядоченных списков.

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

Добавьте приведенный ниже код 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.

армянский хирагана нижнелатинский
круг хирагана-ироха нижний римский
cjk-идеографический наследовать никто
десятичный исходный квадрат
десятичный ведущий ноль сказать верхняя альфа
диск катакана-ироха верхнелатинский
грузинский нижняя альфа верхний римский
иврит нижнегреческий

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее