Как создать маркированный список в Weebly?
Пункты маркированного списка – это самый простой способ рассказать краткое содержание вашей истории по пунктам. Хотя можно создавать списки трех типов – упорядоченные (или нумерованные), неупорядоченные и определяющие списки – упорядоченные и неупорядоченные списки чаще всего используются веб-мастерами. Weebly предлагает эти два типа списков по умолчанию без особых изменений в маркерах. В этой статье мы исследуем все возможные способы создания маркированного списка на сайте Weebly.
Основы списков
Списки создаются с помощью тегов HTML, где
- указывает, что это неупорядоченный список и
- … теги. Стиль маркера обычно определяется стилем браузера по умолчанию, который диск для неупорядоченных и десятичный для упорядоченных списков. Прочтите руководство по спискам HTML, чтобы узнать больше о создании списков.
- Использование параметров списка по умолчанию, доступных для текстового элемента. Это то же самое, что и использование списков HTML
- Использование иконок font awesome для маркеров
- Списки CSS с маркером изображений
- Списки CSS с различными типами маркеров, такими как круг, диск, латинские буквы, строчные буквы, заглавные буквы и т. Д.
Ниже приведены возможные способы создания списков на сайте Weebly:
Проверьте демонстрацию различных типов списков.
Использование списков Weebly по умолчанию
Когда вы щелкаете содержимое внутри текстового элемента, появляется всплывающее окно со множеством опций типографики, как показано ниже:
Weebly по умолчанию предлагает упорядоченные и неупорядоченные списки, аналогичные спискам, созданным с помощью HTML.
- и
Изменение стиля списка по умолчанию в 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», чтобы заменить значок книги на значок дома.
Также замените текст своим.
Списки 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 в CSS.
| армянский | хирагана | нижнелатинский |
| круг | хирагана-ироха | нижний римский |
| cjk-идеографический | наследовать | никто |
| десятичный | начальный | квадрат |
| десятичный ведущий ноль | катакана | верхняя альфа |
| диск | катакана-ироха | верхнелатинский |
| грузинский | нижняя альфа | верхний римский |
| иврит | нижнегреческий |
