YOUSELLER
Среда, 19.02.2020, 05:11
Приветствую Вас Гость | RSS
 
Главная Каталог статей и уроковРегистрацияВход
Меню сайта
Категории каталога
HTML [4]
CSS [8]
Для сайта [4]
Электронные деньги [2]
Разное [6]
Мини-чат
200
Наш опрос
Оцените мой сайт
Всего ответов: 18
Главная » Статьи » Уроки » CSS

Как придать разный вид номеру и элементу списка?
В этом уроке мы будем учиться делать списки, в которых номер элемента имеет один внешний вид, а сам элемент другой.

Пример такого списка можно посмотреть здесь http://ruseller.com/examples/list/list.php

Чтобы добиться нужного эффекта, нам нужно придать элементу списка <ol> шрифт Georgia, а абзацу <p> внутри этого элемента придать шрифт Arial.



1. Перейдем к HTML части:

Создайте список. Элементы списка должны быть внутри абзацев, как показано на примере ниже.

<ol>

<li>
<p>Первая линия</p>
</li>

<li>
<p>Вторая линия</p>
</li>

<li>
<p>Третья линия</p>
</li>

</ol>

На данном этапе список будет выглядеть так:



2. Поработаем на стилем для тэга <ol>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

Теперь список будет выглядеть так:



3. Теперь поработаем над стилем абзаца p, который находится внутри элемента ol

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

Итоговый результат:



Вот такая интересная и в тоже время простая CSS техника для работы со списками.

Категория: CSS | Добавил: Денис (10.08.2008) | Автор: Евгений Попов
Просмотров: 339 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
[05.08.2008][Евгений Попов]
А вы делаете эти дизайнерские ошибки на своём сайте? (1)
[05.08.2008][Евгений Попов]
5 точек потенциального клиента, которые должен знать каждый бизнесмен. (0)
[05.08.2008][Евгений Попов]
5 причин, по которым люди выберут Ваш товар. (0)
[05.08.2008][Евгений Попов]
Как превратить Ваш сайт в магнит влияния на клиентов? (0)
[05.08.2008][Евгений Попов]
Электронная коммерция и электронный (онлайн) бизнес. В чём различия? (0)
[05.08.2008][Евгений Попов]
Наступило лучшее время для начала бизнеса в Сети. (0)
[05.08.2008][Евгений Попов]
Бесплатный хостинг для ведения бизнеса - забудьте! (0)
[05.08.2008][Евгений Попов]
Цель - это путь к вершине! (0)
[05.08.2008][HTML]
Как замаскировать тэг H1 (1)
[05.08.2008][HTML]
Урок: Как правильно использовать фаил robots.txt для запрета индексации фаилов и папок? (0)
Поиск
Друзья сайта
php5.ru
[17.08.2008][Видеоуроки]
Как избавиться от спама с помощью Google? (1)
[05.08.2008][Программы]
Fortop FLV Player (0)
[05.08.2008][Программы]
Total Commander 7.02a Powerpack - отличный фаил-менеджер (0)
[17.08.2008][Видеоуроки]
Внешний вид формы обратной связи (0)
[17.08.2008][Видеоуроки]
Как сделать скругленные углы у HTML таблицы? (0)
[17.08.2008][Видеоуроки]
Как сделать шапку сайта, если ширина сайта задана в процентах? (3)
[16.08.2008][Видеоуроки]
Как скрыть элемент сайта от посторонних глаз (0)
[16.08.2008][Видеоуроки]
Как проверить правильность ввода email в форму (0)
[08.08.2008][Видеоуроки]
Как создать форму обратной связи для сайта. (0)
[17.08.2008][Видеоуроки]
Как создать 3D обложку быстро и бесплатно? (2)
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright © 2020