Главная
Блог разработчиков 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
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB