- Метки урока:
- web дизайн
- css
- списки
Делаем красивые CSS списки для сайта
Красивые списки являются одним из элементов красивого дизайна. Приступим сразу к делу.
Вводное замечание: Делать эти списки мы будем с помощью CSS. В уроке будет рассмотрено несколько практических примеров.
Комплект изображений для этого урока, можете скачать здесь.
Пример №1
|
Прописываем в css файле следующие строки:
/*Говорим, что кружки надо заменить картинкой arrow.gif*/ .arrow { list-style-image: url(lessons/2008/beautifullist/arrow.gif); /*Путь пишите свой*/ } /* Чтобы появился зелёный фон прописываем следующее*/
.li { background-color: #C8F612; }
В html файл пишем следующее:
<ul class="arrow"> <li class="li">ДЕНЬГИ СОЗДАЮТ ДОБРО!</li> <li>ДЕНЬГИ СОЗДАЮТ КОМФОРТ!</li> <li class="li">ДЕНЬГИ ПРЕКРАСНЫ И ХОРОШИ!</li> <li>БОГАТСТВО ЭТО ЧИСТАЯ ЭНЕРГИЯ!</li> <li class="li">Я ЛЮБЛЮ ДЕНЬГИ!</li> <li>ДЕНЬГИ ПРИНОСЯТ МНОГО ХОРОШЕГО!</li> <li class="li">ДЕНЬГИ ПРИНОСЯТ СЧАСТЬЕ!</li> </ul>
Пример №2
|
Прописываем в css файле следующие строки:
/*Говорим, что кружки надо заменить картинками и сделать отступы*/ .arrow_clock { list-style-image: url(img/articles/clock.png); /*Путь пишите свой*/ margin-top: 7px; margin-bottom: 7px; } .arrow_on { list-style-image: url(img/articles/public.png); /*Путь пишите свой*/ margin-top: 7px; margin-bottom: 7px; }
В html файл пишем следующее:
<ul> <li class="arrow_clock">You truly can have anything you can imagine.</li>
<li class="arrow_on">Ты действительно можешь добиться всего, что только
можешь себе представить.</li>
</ul>
В завершении урока, хотел бы дать вам один небольшой совет: Прежде чем использовать изображения в качестве маркеров, обязательно оптимизируйте их в Fireworks MX или Photoshop.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Евгений Попов
Урок создан: 30 Декабря 2007
Просмотров: 67839
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.