Дизайн на маркери (булети) на html-списъци

Инсталиране и изтегляне на Windows OS

Дизайн на маркери (булети) на html-списъци

Местоположение на водещите символи в списъка

Появата набулети (маркери) на списъка започва с местоположението им спрямо текста на списъка. Булети (маркери) на списъка се намират или в текста на списъка, или извън него. CSS свойството на елемента от списъкаlist-style-position отговаря за местоположението на водещите точки. Този малко използван етикет може да причини много проблеми, например с обвиване на списък около изображение. Свойствотоlist-style-position има две стойности,outside - маркерът (булет) се намира извън елементите на списъка иinside - маркерът се намира вътре в елемента и е обвит около неговия текст. По подразбиране list-style-position е извън - маркер извън текста на списъка. Всички отдавна свикнаха с това и забравиха заlist-style-position:inside; За яснота какво се случва, взех текста на елемента от списъка в рамка (border:2px solid #000; свойство).

За по-голяма яснота елементите от списъка са рамкирани (border:2px solid #000;).

Изглежда в браузъра:

  1. Елемент 1
  2. Елемент 2
  3. Елемент 3

Изглежда в браузъра:

  1. Елемент 1
  2. Елемент 2
  3. Елемент 3
Индивидуалният подход към дизайна на всеки елемент ви позволява да създавате напълно неудобни видове списъци:

Изглежда в браузъра:

  1. Елемент 1
  2. Елемент 2
  3. Елемент 3
  4. Елемент 4
Както можете да видите в "живите" примери, ширината на списъка и неговата лява странаотстъпът остава непроменен. Куршумите на списъка, които са извън него (отвън), могат да „обхождат“ съседни елементи на уеб страницата (блокове, изображения). Често при обвиване на картина със списъци се случва точно това.

Разстояние от водещия символ (маркер) до текста на списъка

Разстоянието от водещия символ (маркера) до текста на елемента от списъка е зададено по подразбиране за всеки браузър. Отстъпът от маркера към текста на елемента може да е различен за различните типове и версии на браузъри. Малък css код ви позволява да постигнете показване на списъци в различни браузъри и да промените стойността на отстъпа по подразбиране на ваша собствена. Трябва да се отбележи, че външният вид на списъка се променя драстично в зависимост от зададеното външно/вътрешно свойство. Сега е време за смели експерименти и експерименти:

Разстояние от куршум до съседен обект

Когато се опитвате да коригирате празнината между водещия символ и текста на списъка (разстояние от водещия символ до текста на списъка), беше забелязано, че външният вид на списъка се променя значително в зависимост от присвоеното външно/вътрешно свойство. По-скоро не се променя външният вид на самия списък, а неговият контакт със съседните обекти. Нека се опитаме да разберем защо това се случва и откъде идва този проблем.

Зависимостта на кода от местоположението на куршума (отвън / отвътре) се обяснява с факта, че

Външен вид на куршум

Булети от html списъци могат да приемат цифрова форма, прости маркери, да не се показват изобщо или да имат формата на произволна картина-изображение.

Списъчни маркери

Списъчна номерация

Bulletless Lists (Немаркирани и неномерирани списъци)

Най-важните и приложими атрибути на тага и в XHTML start - указва номера, от който ще започне номерираният списък. Използва се за започване на подреден списък суказаното число. стойност - указва числото, от което ще започва или продължава номерираният списък. Използва се за прекъсване на номерирания списък и започване на номерирането отново от даденото число. title - Добавя подсказка при задържане на курсора на мишката style - Задава листа със стилове (за CSS) id - Задава уникален идентификатор (за CSS) class - Дефинира името на класа, който да се използва (за CSS) type - Задава типа маркер за номериран списък или списък с водещи символи. Атрибутът тип е остарял и не се поддържа от всички браузъри. За да зададете типа на маркера, се препоръчва да използвате атрибута style и CSS cascading style sheets, където посочвате желания тип маркер. Следователно следните примери може да не се показват правилно. Въведете стойности за списък с водещи символи диск - маркер за диск (по подразбиране) кръг - маркер за кръг

Въведете стойности за подреден списък A - главни латински букви a - малки латински букви I - главни римски цифри i - малки римски цифри 1 - арабски цифри (по подразбиране)

Примитивен пример за използване на горните атрибути:

  • пъти елемент (основен списък)
  • Два елемента (основен списък)
  • Три елемента (основен списък)
  • пъти елемент (вложен списък)
  • Два елемента (вложен списък)
  • Три елемента (вложен списък)
  • Четири елемента (втори вложен списък)
  • Пет елемента (втори вложен списък)
  • Шест елемент (втори вложен списък)
  • Седем елемента (втори вложен списък)
  • Осем елемент (втори вложен списък)
  • пъти елемент (втори вложен списък)
  • Два елемента (втори вложен списък)
  • Три елемента (втори вложен списък)
  • Четири елемента (втори вложен списък)
  • Пет елемента (втори вложен списък)
  • Шест елемент (втори вложен списък)
  • Седем елемента (втори вложен списък)
  • Осем елемент (втори вложен списък)

В браузъра изглежда така:

Един елемент (основен списък) Два елемента (основен списък) Три елемента (основен списък) Един елемент (вложен списък) Два елемента (вложен списък) Три елемента (вложен списък) Четири елемента (втори вложен списък) Пет елемент (втори вложен списък) Шест елемент (втори вложен списък)<1 2>Седем елемента (втори вложен списък) Осем елемент (втори вложен списък) Един елемент (втори вложен списък) Два елемента (втори вложен списък) Три елемента (втори вложен списък) Четири елемент (втори вложен списък) Пет елемент (втори вложен списък) Шест елемент (втори d вложен списък) Седем елемента (втори вложен списък) Осем елемент (втори вложен списък) Сега нека си припомним за вложените списъци и коригираме кода с прекъсване, за да избегнем повторение и сблъсък на елементи.

Оказва се нещо като този код:

  • пъти елемент (основен списък)
  • Два елемента (основен списък)
  • Три елемента (основен списък)

  1. пъти елемент (вложен списък)
  2. Два елемента (вложен списък)
  3. Три елемента(вложен списък)
  4. Четири елемента (втори вложен списък)
  5. Пет елемента (втори вложен списък)
  6. Шест елемент (втори вложен списък)
  7. Седем елемента (втори вложен списък)
  8. Осем елемент (втори вложен списък)

  • пъти елемент (втори вложен списък)
  • Два елемента (втори вложен списък)
  • Три елемента (втори вложен списък)
  • Четири елемента (втори вложен списък)
  • Пет елемента (втори вложен списък)
  • Шест елемент (втори вложен списък)
  • Седем елемента (втори вложен списък)
  • Осем елемент (втори вложен списък)

Изглежда в браузъра:

Един елемент (основен списък) Два елемента (основен списък) Три елемента (основен списък)

Един елемент (вложен списък) Два елемента (вложен списък) Три елемента (вложен списък) Четири елемента (втори вложен списък) Пет елемент (втори вложен списък) Шест елемент (втори вложен списък) Седем елемента (втори вложен списък) Осем елемент (втори вложен списък)

Един елемент (втори вложен списък) Два елемента (втори вложен списък) Три елемента (втори вложен списък) Четири елемента (втори вложен списък) Пет елемент (втори вложен списък) Шест елемент (втори вложен списък) Седем елемент (втори вложен списък) Осем елемент (втори не стед списък)

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

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

      - описано в глава 9 на урока по HTML "Списъци" - препоръчвам да опресните информацията за тези елементи в главата си, преди да започнете работа.

Е, щом главата е толкова свежа, тогава да започваме!

Тип маркер в списъка.

Ако си спомняте, в чистия HTML външният вид на маркера в списъка се определяше от атрибута type и една от възможните му стойности, в CSS тази задача се поема от свойството: list-style-type, което от своя страна също има своите стандартни стойности, които определят външния вид на маркера както на целия списък наведнъж, така и на неговия отделен „елемент“.

диск - Диск. (по подразбиране за

    ) кръг - Кух кръг. квадрат - Квадрат. десетичен - арабски цифри. (по подразбиране за
      ) lower-roman – малки римски цифри. lower-alpha – малки букви. upper-roman – главни римски цифри. upper-alpha – главни букви. няма – без маркер. Пример: