TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak tworzyć elementy listy punktowanej w Weebly?

0

Tagi. Listy nieuporządkowane używają stylu dysku jako stylu listy, a listy uporządkowane używają stylu dziesiętnego dla punktorów. W Weebly nie ma dalszej opcji zmiany tych wartości domyślnych, chyba że zmienisz je w głównym arkuszu stylów.

Zmiana domyślnego stylu listy w CSS

Jeśli chcesz zmienić domyślny styl listy, dodaj następujący kod w swoim pliku „main.less" (stare motywy będą miały „main_style.css”). Użyliśmy okręgu i niższej alfa odpowiednio dla list nieuporządkowanych i uporządkowanych.

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; }

Korzystanie z czcionek Awesome Icons dla list Bullets

Chociaż zmiana głównego arkusza stylów jest łatwa, ogranicza użycie do określonego typu punktora. Prostą i zalecaną alternatywą jest użycie niesamowitych ikon czcionek (lub dowolnych innych ikon) jako punktora na listach. Daje to możliwość dodawania do list nieograniczonych rodzajów ikon. Co więcej, możesz użyć różnych ikon punktorów dla tych samych nieuporządkowanych lub uporządkowanych elementów listy.

Jak tworzyć elementy listy punktowanej w Weebly?

Aby użyć wspaniałych ikon czcionek jako listy, dodaj poniższy kod w sekcji „Kod nagłówka” na swojej stronie 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>

Atrybuty wysokości linii i rozmiaru czcionki służą do zapewnienia prawidłowego wyrównania ikon i tekstu. Poniżej znajduje się treść HTML, którą należy dodać w elemencie „Kod do umieszczenia na stronie”.

<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>

Oto lista wspaniałych ikon czcionek w celach informacyjnych, wybierz tę, której chcesz użyć, i zastąp podświetloną klasę ikon własną. Na przykład zamień „fa-book” na „fa-home”, aby zastąpić ikonę książki ikoną domu.

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

Zamień również tekst na swój własny.

Listy CSS z punktami graficznymi

Możesz użyć CSS, aby zdefiniować obraz jako punktor dla elementów listy.

Jak tworzyć elementy listy punktowanej w Weebly?

Najpierw wybierz obraz, który ma być wykorzystany jako punktor, i prześlij go na swoją witrynę Weebly. Następnie dodaj poniższy kod w sekcji „Kod nagłówka” na swojej stronie:

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

Tutaj „Hand.png” jest obrazem używanym do punktora, a pozostałe style mają zapewnić wyrównanie treści do obrazu punktora. Dodaj poniższy kod HTML i opublikuj witrynę, aby zobaczyć pociski w akcji.

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

Listy CSS z różnymi typami pocisków

Możesz również użyć CSS do tworzenia różnych typów punktorów dla nieuporządkowanych i uporządkowanych list.

Jak tworzyć elementy listy punktowanej w Weebly?

Dodaj poniższy kod CSS w sekcji „Kod nagłówka” na swojej stronie 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>

W tym przykładzie tworzymy cztery różne style punktorów – dwa dla nieuporządkowanych i dwa dla uporządkowanych list z „wspólnymi” atrybutami klasy dla marginesu, rozmiaru czcionki i wysokości linii, aby zapewnić wyrównanie treści. Dodaj poniższy kod HTML, używając elementu „ Embed Code “, aby tworzyć listy z różnymi stylami punktorów.

<!-- 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>

Uwaga: Właściwość CSS „list-style-type” może służyć do definiowania stylu punktora zarówno dla list uporządkowanych, jak i nieuporządkowanych.

Wartości dla typu stylu listy

Poniżej znajduje się lista wartości, które możesz podać dla list-style-type w CSS.

ormiański hiragana dolna łacina
okrąg hiragana-iroha dolno-rzymski
cjk-ideograficzne dziedziczyć Żaden
dziesiętny Inicjał kwadrat
dziesiętne zero wiodące mowić wyższa alfa
dysk katakana-iroha górna łacina
gruziński niższy alfa górnorzymski
hebrajski dolnogrecki

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów