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

Як створити марковані елементи списку у Weebly?

2

теги. Невпорядковані списки використовують диск як стиль списку, а впорядковані списки – десятковий стиль для маркерів. У 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; }

Використання чудових значків шрифтів для маркерів списків

Хоча зміна основної таблиці стилів проста, вона обмежує використання певного типу маркера. Проста і рекомендована альтернатива – використовувати чудові шрифти (або будь -які інші значки) як маркер у списках. Це дає можливість додавати до списків необмежену кількість іконок. Крім того, ви можете використовувати різні значки маркерів для тих самих невпорядкованих або впорядкованих елементів списку.

Як створити марковані елементи списку у 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-типу-типу-типу можна використовувати для визначення стилю маркування як для впорядкованих, так і для невпорядкованих списків.

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

Нижче наведено список значень, які можна надати для типу списку у CSS.

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

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі