Списък с подредени и номерирани HTML

В HTML има два вида списъци: номерирани и неопределени. Тяхното създаване е почти същото. Дори етикетите се различават от един знак. Можете също да създавате списъци на няколко нива, които могат да включват както номерирани, така и списъци с маркери.

Тези списъци могат да се конвертират по ваш избор. Всичко зависи от вашето въображение. Първо, ще разгледаме стандартните списъци, същите като в редактора на Word, и след това ще ги подобрим и ще направим непризнати.

Номериран HTML списък

Редовно номерирани HTML списък може да се създаде, като се използват следните маркери:

Обикновените списъци изглеждат така

Съгласно стандартите, всеки елемент от списъка трябва да е в отварящия и затварящия етикет. Но ако не поставите маркера за затваряне, резултатът ще бъде същият. Процесорът е много умен. По време на преобразуването на списъка той анализира маркерите за отваряне. Ако види нов

По този начин списъците могат да се извършват както е показано по-долу.

Но от гледна точка на професионалистите това не е правилно.

Буквени списъци

Неизвестните (или маркери) списъци се създават точно по същия начин, само вместо ol tag, ul е написан.

В подредени списъци няма цифри или букви - само различни символи, които се наричат ​​маркери.

Многоелементно номериран HTML списък

Много от потребителите се интересуват от тази възможност. Ето защо трябва да се отбележи, че всеки номериран списък на HTML може да бъде направен на много нива. Допълнителните нива могат да бъдат еднакви или маркирани.

За да създадете списъка, посочен в горния пример, трябва да напишете следното.

Имайте предвид, че в този код, за разлика от първите примери, се добавя атрибутът type. Благодарение на него можете да посочите типа на сортиране както за номерирани, така и за списъци с маркери.

За номерираните ние посочваме азбуката или типа на цифрите, а в други случаи - типа маркер.

Посочете опциите за сортиране

Ако използвате специален HTML маркер, номерът може да бъде всичко, което искате.

Можете да зададете атрибута тип с всяка стойност от таблицата. Или, в класа стил css, посочете типа списък стил с желания тип сортиране.

Преводът на стойностите е съвсем прост. Достатъчно от основните познания по английски език. Но дори и да не може да превежда думата "кръг", "квадрат", и така нататък. Н., можете да видите визуално какъв е резултатът, когато укажете тези ценности в атрибута на вида.

За номерирани списъци трябва да използвате следните опции:

• 1 - арабски цифри;
• А - капитал латински букви;
• a - латински букви с малки букви;
• I - римски номера на капитала;
• i - малка римска цифра.

По подразбиране е налице списък с Арабски цифри. Тоест, ако не сте посочили нищо, това е еквивалентно на тип = "1".

В допълнение, номерираните списъци могат да бъдат стартирани от всяка желана позиция. По подразбиране - изход от 1. Но ако искате, можете да започнете с поне сто. За да направите това, трябва да посочите началния атрибут с всяка стойност.

В допълнение, това може да се направи в обратен ред. За да направите това, напишете обърната.

Регистрация на списъци

Номерираните списъци с HTML могат да бъдат проектирани толкова красиво, че не можете веднага да отгатнете, че това е обикновен списък, а не снимка, направена в Photoshop.

Ето примери за красиви списъци.

Както можете да видите от примера, можете да промените появата на номерацията и самите елементи.

Можете да създадете обикновен списък по този начин.

В css стилове, трябва да определите оформлението за ol тагове. Имайте предвид, че в този случай настройките ще се прилагат към всички списъци на целия сайт, където се използва този стилов лист.

Първо разгледайте опцията с дизайн на кръгъл списък. Върнете се в кода на списъка. Има класов закръглен списък. Това е, че с този клас трябва да се дрънкате, за да направите такава красота. Можете да наименувате класа по ваш избор.

Сега разгледайте квадратния дизайн.

Стилите са много сходни. Разликата е, че в първия случай елементът се закръгля, като се използват възможностите на css.

Поддръжка на браузъра

Важно е да разберете, че не всички браузъри поддържат всички атрибути css.

Например искате да направите номериран списък центриран. HTML кодът ще бъде същият, но резултатът от по-старите браузъри може да е съвсем различен.

Същото важи и за регистрацията на номерацията.

Както можете да видите, квадратите около числата в по-старите версии на IE браузъра не се появиха, тъй като обработващият не знае новите атрибути, които правят възможно това.

Професионалният уеб дизайнер трябва да предвиди и да разбере, че не всички потребители използват съвременни компютри. Не всеки има Windows 7, 8, 10. Има процент от потребителите, които все още седят в Windows XP и използват по-старите версии на браузъра Internet Explorer.

По правило почти всички модерни подобрения на дизайна на елементите не се поддържат от тях. Потребителят ще почувства, че дизайнът на сайта изобщо не работи. Това, че всичко се е променило. Елементите се намират един в друг. За да избегнете това, трябва да изчислите всички опции.

Някои уебмастъри си затварят очите, тъй като техният дял в текущия пазар става все по-малък и по-малък. Но за всеки професионален посетител е важно, особено ако това е търговски обект.

Направете нещо подходящо за всички или разгледайте всички варианти на браузърите.