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

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

Основы списков

Списки создаются с помощью тегов HTML, где

    указывает, что это неупорядоченный список и

      указывает, что это упорядоченный список. Пункты списка для обоих случаев заключены в

    1. теги. Стиль маркера обычно определяется стилем браузера по умолчанию, который диск для неупорядоченных и десятичный для упорядоченных списков. Прочтите руководство по спискам HTML, чтобы узнать больше о создании списков.

      Ниже приведены возможные способы создания списков на сайте Weebly:

      1. Использование параметров списка по умолчанию, доступных для текстового элемента. Это то же самое, что и использование списков HTML
      2. Использование иконок font awesome для маркеров
      3. Списки CSS с маркером изображений
      4. Списки CSS с различными типами маркеров, такими как круг, диск, латинские буквы, строчные буквы, заглавные буквы и т. Д.

      Проверьте демонстрацию различных типов списков.

      Использование списков Weebly по умолчанию

      Когда вы щелкаете содержимое внутри текстового элемента, появляется всплывающее окно со множеством опций типографики, как показано ниже:

      Weebly по умолчанию предлагает упорядоченные и неупорядоченные списки, аналогичные спискам, созданным с помощью HTML.

        и

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

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

          Список элементов с помощью значков 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», чтобы заменить значок книги на значок дома.

        1. фа-книга«> Книга
        2. Также замените текст своим.

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

          Вы можете использовать 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

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *