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

Използването на заглавни маркери и списъци са чудесен начин да позволявате на хората лесно да виждат основното съдържание на вашия уебсайт. Ако смятат, че списъците и подпозициите са интересни, има по-голям шанс да останат на вашия сайт. Това, разбира се, води до намалени проценти на „отпадане“ и помага за подобряване на доверието и класирането на уебсайта Ви в двигателите. Всичко, което подобрява четимостта, улеснява очите да се плъзгат, винаги ще се възползва от уебсайт. Страхотният дизайн винаги има в предвид четимостта.

CSS е лесен и много ефективен начин за създаване на стилни списъци с персонализирани куршуми (маркери). Можете да включите различни форми или обикновени персонализирани графики, които се връзват в логото, цветовете или темата на вашия уебсайт. Например, на уебсайт за призрачни обиколки създадох малка икона на призрак, която се използва в страничната лента за навигация и върху неподредени елементи от списъка на главната страница. Беше проста, но много сладка и обвързана с темата за сайтовете, правейки тези елементи на страницата да изпъкнат.

Друг път куршумите могат да отвлекат вниманието от важно съдържание в списък. В този случай свойството на списъчен стил от "none" може да се използва за премахване на автоматично генерираните маркери.

Списък Свойства на стила



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

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

ul {list-style-image: url (imagename.jpg);
списък-стил-позиция: отвън;
}

URL адресът е относително към таблицата със стилове и трябва да сочи към папката, в която е вашето изображение. В този случай изображението ще бъде в същата папка като css и html файла. Ако поставите вашите изображения в отделна папка, ще включите и това: url (images / imagename.jpg)

Позиции на маркери



Можете също да персонализирате позицията на маркерите. В горния пример външното свойство кара куршума да се показва извън областта на съдържанието.
list-style-position: вътре позволява куршума в областта на съдържанието, така че да попадне в съдържанието на списъка.

Техника за стенограми



Друг бърз начин за форматиране на списък с помощта на CSS е техниката на стенограмата. С този метод всички свойства на списъка са посочени в едно единствено свойство:

ул
{
list-style: URL адрес на кръга ("image.gif");
}

в метода на стенограмата всички стойности трябва да се показват в определен ред, както следва:

списък стил тип
списък-стил-позиция (отвътре, отвън)
списък стил изображение

Няма значение дали пропуснете стойност, стига останалите да останат в правилния ред.

Персонализираните списъци са много полезни и CSS ги прави лесно постижими. Простите детайли превръщат средните уебсайтове в най-добрите уеб сайтове.


Инструкции Видео: Technology Stacks - Computer Science for Business Leaders 2016 (Март 2024).