|
|
|
|
Урок 7. Как сделать списки в CSS. Скачать бесплатно коллекцию иконок Автор: Андрей Краснокутский Дата: 2009-04-07 Атрибут CSS list-style-type: .Продолжаем наши CSS уроки. Сегодня используя стили CSS мы научимся делать списки. Как мы делали списки с помощью HTML Вы можете вспомнить здесь. Там же Вы можете посмотреть в каких случаях нам могут понадобиться списки. Для начала открываем нашу таблицу стилей style.css (файл в котором мы создаем новые стили) и создаем новый стиль. Для определенности назовем наш новый стиль например .list . Естественно в CSS есть и свои атрибуты и значения этих атрибутов, которые "говорят" браузеру как отображать список на экране монитора. Основной атрибут это list-style-type: и его значения:
В 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-страницу. Примеры таких файлов - маркеров:
Вариантов таких маркеров может быть множество, я уверен Вы видели много таких примеров применения графических маркеров. Далее открываем нашу таблицу стилей style.css и создаем новый стиль. В качестве маркера будем использовать один из файлов представленный выше (средний): Листинг 7.1.
Естественно это стиль необходим придать нашему списку. Открываем наш файл со списком (например index.html) и прописываем только что созданный стиль ul class="list", полностью листинг кода выглядит так: Листинг 7.2.
А вот так Ваш список будет отображаться на web-странице:
Рисунок 7.1 Получился очень симпатичный список. Кстати вставлять графические файлы или иконки можно не только в списках, но и в любом месте web-страницы, вспомните как вставляются картинки в HTML документ и пользуйтесь этим. Ваши сайты станут намного ярче, красочнее и привлекательнее. Что бы Вам было веселее :-) и Вы смогли бы сразу вставлять иконки на страницы своего сайта, выкладываю коллекцию иконок, качайте её бесплатно и пользуйтесь (больше 1000 штук).
Размер архива: 750 кБ. Скачать бесплатно: Коллекцию Иконок
Качайте Бесплатно и читайте так же: "Учимся делать собственный сайт за 11 уроков". Практическое руководство. Практическое руководство "Как сделать красивую 3D обложку" Практическое руководство "Как сделать электронную книгу в .EXE формате" Практическое руководство "Как сделать PopUp привлекающий внимание" Практическое руководство "Как сделать Электронную книгу в PDF формате"
Просмотров: 20983 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): артем НЕ ОТОБРАЖАЮТСЯ КАРТИНКИ В БРАУЗЕРЕ, ЧЕРЕЗ css Комментарии добавил(а): AndreyK проверьте правильность указания пути до картинки Комментарии добавил(а): Верстальщик Классный набор картинок Комментарии добавил(а): Владимир Архив коллекции картинок повреждён (размер 471 Кб). Исправьте по возможности. Комментарии добавил(а): Валентина Архив коллекции картинок повреждён (размер 471 Кб). Исправьте по возможности. Комментарии добавил(а): АндрейК Архив коллекции иконок обновил, все работает Комментарии добавил(а): Андрей Хорошая статья Комментарии добавил(а): Александр А где можно взять готовый style.css Комментарии добавил(а): Гульсум Андрей, спасибо) учиться легко и приятно Комментарии добавил(а): Александр "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, все прекрасно работает. Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |