Персонализиран изглед на списък

2019-03-18
- 7
- април
  2015 г.

Добър ден. 🙂

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

Именно за такива списъци ще говорим. Въпреки това, може би някои от вас ще приложат това към списъци, за да създадат меню или просто да покажат нещо. Стандартните списъци могат да варират. Основните са в тагове ол и ул.

OL - извежда номериран списък. Всеки нов елемент ще бъде предшестван от число по ред.

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

Искам да покажа как можете да направите промени в етикетирането на списъци и да го направите уникален. Ще ви покажа няколко примера, с помощта на които можете да направите необичайни списъци със собствените си ръце. По-долу в примера можете да видите какво е какво.

Как да имаме скоби след всяко число

Първият списък в примера е да добавите скоба след числото. Това не може да се направи с помощта на стандартни методи. За да изпълним нашия план, трябва да използваме псевдоелемента - : преди.

Първо трябва да направите самия списък и да му присвоите клас, така че само той да е уникален по своя външен вид. Ние ще използваме Ол, защото първоначално използва цифров маркер на списъка.

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

Колкото е необходимо. вместо скоба можете да поставите друг знак, ако разбира се е необходимо.

Как да направя маркер като дума

Този метод ще показва думи вместо маркер. Например: Стъпка 1, Стъпка 2 и т.н. Глава 1, Глава 2 и т.н. По принцип каквото искате пред цифровия маркер. За да направим това, ние отново дефинираме списъка и задаваме класа на него.

Тук използвахме ul списък. След това добавете стилове в параметрите на псевдоелемента : преди преди числото поставяме думата - имаме го "Стъпка", а след точката "."

Как да направя всеки знак като маркер

Идеята на метода е да замени всички стандартни маркери с произволен знак. В нашия случай това е двойна пунктирана линия. Просто посочете желания символ в параметъра съдържание:.

Е, самите стилове:

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

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

Групирани списъци като този могат да бъдат получени с минимални ощипвания на стила. Сега можете да използвате необичайни списъци, когато пишете статия за вашия сайт.

Това е всичко, благодаря за вниманието. 🙂