Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Как сделать списки в CSS. Скачать бесплатно коллекцию иконок.

Viktor | 24.02.2014 | нет комментариев

Атрибут CSS list-style-type: .

Продолжаем наши CSS уроки. Сегодня используя стили CSS мы научимся делать списки. Как мы делали списки с помощью HTML Вы можете вспомнить здесь. Там же Вы можете посмотреть в каких случаях нам могут понадобиться списки.

Для начала открываем нашу таблицу стилей style.css (файл в котором мы создаем новые стили) и создаем новый стиль. Для определенности назовем наш новый стиль например .list . Естественно в CSS есть и свои атрибуты и значения этих атрибутов, которые “говорят” браузеру как отображать список на экране монитора. Основной атрибут это list-style-type: и его значения:

  • list-style-type: decimal; – отображать список цифрами ;
  • list-style-type: upper-roman; – отображать список большими римскими цифрами;
  • list-style-type: lower-roman; – отображать список маленькими римскими цифрами;
  • list-style-type: lower-alpha; – отображать список маленькими английскими буквами;
  • list-style-type: upper-alpha; – отображать список большими английскими буквами;
  • list-style-type: none; – отображать список без маркеров.

В CSS есть еще один замечательный атрибут (которого нет в HTML) позволяющий в качестве маркеров задать графический файл. Например Вы в качестве маркера хотите использовать красивую галочку, приём очень часто применяемый и смотрится дествительно очень красиво, а главное профессионально. Задается такой вариант отображения списка можно с помощью атрибута list-style-image: . Но раз это графический файл, значит надо указать где он лежит т.е. путь к файлу, например у нас этот файл лежит в одной папке с Вашим файлом который отображает список, значит путь будет самый простой а именно: url(mini_ben.gif); Полность это свойство будет записано в таблице стилей так list-style-image:url(mini_ben.gif);

Теперь давайте рассмотрим это все на конкретном примере. Создадим список используя свойства CSS, а в качестве маркера будем использовать графический файл check.gif .

Для начала создаём в программе Photoshop графический файл, который будем использовать в качестве маркера, обычно файл имеет размеры примерно 16 х 16 или 25 х 25 px или близкие к этому, сохраняем его в формате .gif , .png или .jpg. Чаще применяют формат .gif или .png – такие файлы меньше “весят” ( от 100 до 600 байт) и очень быстро грузятся на web-страницу. Примеры таких файлов – маркеров:

иконка галочка иконка стрелочка иконка галочка1 иконка галочка2 иконка круг анимированный

Вариантов таких маркеров может быть множество, я уверен Вы видели много таких примеров применения графических маркеров.

Далее открываем нашу таблицу стилей style.css и создаем новый стиль. В качестве маркера будем использовать один из файлов представленный выше (средний):

Листинг 7.1.

.list
{
list-style-image:url(check.gif);
}

Естественно это стиль необходим придать нашему списку. Открываем наш файл со списком (например index.html) и прописываем только что созданный стиль ul, полностью листинг кода выглядит так:

Листинг 7.2.

<ul>
<li>Товары для автомобилей</li>
<li>Товары для населения</li>
<li>Товары повседневного спроса</li>
<li>Фотоаппараты</li>
<li>Бытовая техника</li>
</ul>

А вот так Ваш список будет отображаться на web-странице:

Рисунок 7.1

Получился очень симпатичный список.

Кстати вставлять графические файлы или иконки можно не только в списках, но и в любом месте web-страницы, вспомните как вставляются картинки в HTML документ и пользуйтесь этим. Ваши сайты станут намного ярче, красочнее и привлекательнее.

Что бы Вам было веселее :-) и Вы смогли бы сразу вставлять иконки на страницы своего сайта, выкладываю коллекцию иконок, качайте её бесплатно и пользуйтесь (больше 1000 штук).

коллекция иконок 1000 шт.

Размер архива: 750 кБ.

Скачать бесплатно: Коллекцию Иконок

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB