Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 2009-04-07

Атрибут 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 class="list", полностью листинг кода выглядит так:

Листинг 7.2.

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

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

Рисунок 7.1

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

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

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

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

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

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

 

Качайте Бесплатно и читайте так же:

"Учимся делать собственный сайт за 11 уроков". Практическое руководство.

Практическое руководство "Как сделать красивую 3D обложку"

Практическое руководство "Как сделать электронную книгу в .EXE формате"

Практическое руководство "Как сделать PopUp привлекающий внимание"

Практическое руководство "Как сделать Электронную книгу в PDF формате"

 

Просмотров: 15504


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): артем
Дата: 2009-11-07

НЕ ОТОБРАЖАЮТСЯ КАРТИНКИ В БРАУЗЕРЕ, ЧЕРЕЗ css

Комментарии добавил(а): AndreyK
Дата: 2009-11-08

проверьте правильность указания пути до картинки

Комментарии добавил(а): Верстальщик
Дата: 2009-11-27

Классный набор картинок

Комментарии добавил(а): Владимир
Дата: 2010-11-13

Архив коллекции картинок повреждён (размер 471 Кб). Исправьте по возможности.

Комментарии добавил(а): Валентина
Дата: 2010-11-22

Архив коллекции картинок повреждён (размер 471 Кб). Исправьте по возможности.

Комментарии добавил(а): АндрейК
Дата: 2010-11-22

Архив коллекции иконок обновил, все работает

Комментарии добавил(а): Андрей
Дата: 2010-12-28

Хорошая статья

Комментарии добавил(а): Александр
Дата: 2011-01-18

А где можно взять готовый style.css

Комментарии добавил(а): Гульсум
Дата: 2011-09-21

Андрей, спасибо) учиться легко и приятно

Комментарии добавил(а): Александр
Дата: 2013-06-22

"CSS есть еще один замечательный атрибут (которого нет в HTML) позволяющий в качестве маркеров задать графический файл." в HTML есть, вот пример: ul> <li><a href="mac.html"> Macbook air</a></li> <li><a href="mac.html"> iPad</a></li> <li><a href="mac.html"> iPone</a></li> <li><a href="mac.html"> iPod</a></li> <li><a href="mac.html" > Macbook pro</a></li> </ul> Это написано не в CSS,а в HTML, все прекрасно работает.

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Видео Курс по созданию
Информационного Бизнеса в Интернете
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT