- неупорядоченный список). В этом уроке я покажу вам 8 отличных способов, позволяющих сделать обычные скучные html-списки привлекательными. Мы лишь добавим несколько простых CSS техник и наши списки не только приобретут потрясающий вид, но и несколько дополнительных возможностей.
А теперь посмотрите демо-версию, чтобы увидеть, что же мы с вами будем создавать.
Выглядят гораздо лучше, не так ли? И вы тоже можете создать такие списки при помощи простого CSS кода. Хотите знать как? Читайте!
Список #1: Простая система навигации
Чаще всего списки используются при создании навигационного меню. Код данного HTML/CSS примера позволяет создать простую, даже немного скромную, но привлекательную систему навигации.
/* LIST #1 */
#list1 { }
#list1 ul { list-style:none; text-align:center; border-top:1px solid #eee;
border-bottom:1px solid #eee; padding:10px 0; }
#list1 ul li { display:inline; text-transform:uppercase; padding:0 10px;
letter-spacing:10px; }
#list1 ul li a { text-decoration:none; color:#eee; }
#list1 ul li a:hover { text-decoration:underline; }
Список #2: Использование различного шрифта при нумерации
Проблема при использовании списка в том, что он сливается с текстом. А цифры всегда того же цвета, что и текст.
Но стоит добавить немного стилей, и вы забудете о вышеперечисленных ограничениях, а ваши списки станут гораздо привлекательнее. Вот как это делается:
The Netherlands is a country in ...
The United States of America is a federal constitutional
...
The Philippines officially known as the Republic ...
The United Kingdom of Great Britain and ...
/* LIST #2 */
#list2 { width:320px; }
#list2 ol { font-style:italic; font-family:Georgia, Times, serif;
font-size:24px; color:#bfe1f1; }
#list2 ol li { }
#list2 ol li p { padding:8px; font-style:normal; font-family:Arial;
font-size:13px; color:#eee; border-left: 1px solid #999; }
#list2 ol li p em { display:block; }
Список #3: Изображения-маркеры
Вы легко можете поменять вид маркеров неупорядоченного списка, указав одно из стандартных значений, но ведь можно в качестве маркеров использовать и изображения. Такое решение поможет сделать ваши списки более оригинальными. А вот и код:
/* LIST #3 */
#list3 { }
#list3 ul { list-style-image: url("../images/arrow.png"); color:#eee;
font-size:18px; }
#list3 ul li { line-height:30px; }
Список #4: iPhone-стиль
Данный список взят из статьи the iPhone Contacts App, созданный при помощи CSS и jQuery. Так выглядят списки на iPhone. Очень привлекательно, не так ли? Хотите такой на свой сайт?
- Toronto2004
- Beijing2008
- London2012
- Rio de Janeiro2016
/* LIST #4 */
#list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; }
#list4 ul { list-style: none; }
#list4 ul li { }
#list4 ul li a { display:block; text-decoration:none; color:#000000;
background-color:#FFFFFF; line-height:30px;
border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC;
padding-left:10px; cursor:pointer; }
#list4 ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png);
background-repeat:repeat-x; }
#list4 ul li a strong { margin-right:10px; }
Список #5: Вложенные списки
Вложенные списки могут быть необыкновенно полезны и выглядят красиво. Изменив третью технику (Изображения-маркеры), мы можем создать «расширенный список». Конечно же не без помощи jQuery:
- Google
- Picasa
- Feedburner
- Youtube
- Microsoft
- Corel Corporation
- Zignals
- ByteTaxi
- Yahoo!
- Xoopit
- BuzzTracker
- MyBlogLog
/* LIST #5 */
#list5 { color:#eee; }
#list5 ol { font-size:18px; }
#list5 ol li { }
#list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0
5px 18px; font-size:15px; }
#list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }
Список #6: Римская нумерация + многострочный тип
По умолчанию в списке используются стандартная нумерация (1, 2, 3, 4 и т.д.). Изменив значение в CSS, вы можете задать другой тип нумерации, к примеру, римский.
Так же по умолчанию, нумерация и маркеры располагаются вне списка (отличный пример тому - наш список под номером 2). Но и это исправимо, всего лишь нужно изменить значение list-style-position свойства на inside.
- Lorem ipsum dolor sit amet, ...
Fusce sit amet ...
- Aenean placerat lectus tristique...
Vivamus interdum ...
- Mauris eget sapien arcu, vitae...
Phasellus neque risus...
- Phasellus feugiat lacus ...
Duis rhoncus ...
/* LIST #6 */
#list6 { font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva,
Helvetica, Arial, sans-serif; }
#list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px;
list-style-position: inside; }
#list6 ol li { }
Список #7: Линейный список, в котором пункты перечисляются через запятую
Обычно списки используются для отображения количества чего-либо и отражаются в виде столбика. Но как быть, если вам нужен линейный список? Это достигается путем смены значения display свойства на inline. Но если вам вдруг понадобится встроить список в текст, то по правилам, пунктики списка должны быть разделены запятой. Как этого добиться? А, просто, при помощи элемента:after символического кода.
- First inline item
- Second inline item
- Third inline item
- Fourth inline item
/* LIST #7 */
#list7 { }
#list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; }
#list7 ul li { display: inline; }
#list7 ul li:after { content: ", "; }
#list7 ul li.last:after { content: ". "; }
Список #8: Вращающееся навигационное меню
Вот и последняя техника, для работы которой понадобится CSS3 (поддерживается только последними версиями Firefox, Safari и Chrome). При наведении курсора на один из элементов блока включается эффект - вращение. Конечно не самый удобный способ, но очень красивый.
/* LIST #8 */
#list8 { }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333;
border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px
20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }
Заключение
Как видите, реально создать уникальные вещи из обычного html-списка. И все это силами CSS. Очень рад, если вы узнали много интересного для себя.
Списки - важный элемент веб-страницы. Они помогают структурировать информацию и преподносить ее в удобном для пользователя виде. Кроме того, в виде списков часто оформляются меню и навигационные панели. Управлять положением и внешним видом маркирующего элемента позволяет группа свойств
Виды списков
Различают упорядоченные и неупорядоченные списки. В первых маркером может служить любой символ, не изменяющийся от пункта к пункту, во вторых каждый элемент списка имеет собственный маркер, определяющий его местоположение среди остальных.
В упорядоченных списках для маркировки обычно используют цифры или буквы разных систем и алфавитов.
В зависимости от степени вложенности различают одноуровневые и Каждый уровень часто имеет собственный маркирующий элемент.
Использование списков при создании меню или панелей навигации поощряется последней версией стандарта HTML, так как этот элемент обладает важным семантическим значением.
Отображение в CSS
Каждый пункт является блочным контейнером с особым типом отображения display: list-item. По умолчанию это значение устанавливается для элементов li, расположенных внутри контейнеров ul и ol, и обеспечивает отображение маркера перед блоком.
При необходимости такой тип отображения можно установить для любого HTML-контейнера. Появившийся маркирующий элемент стилизуется с помощью группы свойств CSS list-style.
P {
display: list-item;
list-style-type: decimal;
}
Все три перечисленные ниже свойства наследуются дочерними элементами, имеющими display: list-item, и в случае необходимости требуют явного переопределения.
Положение маркера списка
Первое свойство группы - list-style-position. Оно определяет, остается ли маркер в блоке текста или выносится за его пределы.
Свойство принимает одно из двух значений:
Разница между ними особенно хорошо заметна на многострочных пунктах.
List1 {
list-style-position: outside;
}
.list2 {
list-style-position: inside;
}
По умолчанию установлено значение outside, и маркер списка выносится за границу блока.
Внешний вид маркера
Второе свойство - list-style-type - управляет типом маркирующего элемента и может принимать больше пятнадцати значений.
По умолчанию для нумерованного списка используются арабские цифры, а для маркированного - точки. Но свойства list-style в CSS позволяют изменить эти установки и даже вовсе удалить маркеры.
Маркеры неупорядоченных списков:
- disc - обычная точка, закрашенная цветом текста;
- circle - незаполненный кружок с обводкой в цвет текста;
- square - закрашенный квадрат.
Для упорядоченных списков вариантов гораздо больше:
| Значение свойства list-style-type
| Описание
|
| decimal
| стандартная арабская нумерация, с единицы и далее: 1, 2, ..., 10, ...
|
| decimal-leading-zero
| использует арабские цифры, значения состоящие из одного символа дополняет незначащим нулем слева: 01, 02, ... , 10, ...
|
|
| латинского алфавита: a, b, ... , e, ...
|
|
| заглавные алфавита: A, B, ... , E, ...
|
| lower-greek
| греческий алфавит, строчные символы
|
| lower-roman
| римские цифры, обозначенные строчными символами: i, ii, ... , vi, ...
|
| upper-roman
| римские цифры, обозначенные заглавными символами: I, II, ... , VI, ...
|
| armenian
| армянский стиль нумерации
|
| georgian
| грузинский стиль нумерации
|
| hebrew
| еврейский стиль нумерации
|
|
| различные японские стили нумерации, строчные символы
|
|
| различные японские стили нумерации, заглавные символы
|
| cjk-ideographic
| восточная идеографическая нумерация
|
Некоторые значения дублируют друг друга, например lower-alpha и lower-latin, а другие не поддерживаются рядом браузеров и шрифтов.
При необходимости маркеры упорядоченного типа могут быть применены к неупорядоченным спискам ul и наоборот.
Отдельно следует выделить значение none, которое скрывает маркеры у списка любого типа. Оно особенно полезно при создании навигационных панелей, когда требуется сохранить семантику списка, но маркирующие элементы не вписываются в дизайн. Также свойство часто используется для пользовательской стилизации.
List {
list-style-type: none;
}
Пользовательский маркер
Вместо определенных CSS видов маркирующих элементов можно использовать любое изображение. Для этого необходимо передать ссылку на него свойству list-style-image.
Можно использовать даже изображения в формате gif - анимация будет сохранена. Важно помнить, что отображает изображение в натуральную величину.
List {
list-style-image: url(image.jpg);
line-height: 25px;
}
Например:
Помимо файлов изображений, можно использовать CSS-функции радиальных или линейных градиентов:
List {
list-style-image: radial-gradient(lightblue, aqua, blue);
}
Форма маркера при этом остается квадратной.
Объединенный синтаксис
Все свойства, определяющие отображение маркера списка, могут быть объединены в одном - CSS list-style.
List-style: list-style-type list-style-position list-style-image
Конкретные свойства перечисляются через пробел, нарушать их порядок нельзя, но любое из них можно опустить:
List1 {
list-style: none;
}
.list2 {
list-style: upper-roman inside;
}
.list3 {
list-style: inside url(/images/img1.png);
}
Для сброса стилей к исходным параметрам существует значение initial , которое может быть передано любому из четырех перечисленных свойств.
Используя группу в сочетании с эффектами наведения, можно создавать красивые уникальные списки, привлекающие внимание пользователя.
CSS-списки
— набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка
, добавить изображение для маркера
, а также изменить местоположение маркера
. Высоту блока маркера можно задать свойством line-height .
Оформление списков с помощью CSS-стилей
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер
для маркированного и нумерованного списков. Наследуется.
| list-style-type
|
|---|
| Значения:
|
|
| disc
|
Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
|
| armenian
|
Традиционная армянская нумерация.
|
| circle
|
В качестве маркера выступает незакрашенный кружок.
|
| cjk-ideographic
|
Идеографическая нумерация.
|
| decimal
|
1, 2, 3, 4, 5, …
|
| decimal-leading-zero
|
01, 02, 03, 04, 05, …
|
| georgian
|
Традиционная грузинская нумерация.
|
| hebrew
|
Традиционная еврейская нумерация.
|
| hiragana
|
Японская нумерация: a, i, u, e, o, …
|
| hiragana-iroha
|
Японская нумерация: i, ro, ha, ni, ho, …
|
| katakana
|
Японская нумерация: A, I, U, E, O, …
|
| katakana-iroha
|
Японская нумерация: I, RO, HA, NI, HO, …
|
| lower-alpha
|
a, b, c, d, e, …
|
| lower-greek
|
Строчные символы греческого алфавита.
|
| lower-latin
|
a, b, c, d, e, …
|
| lower-roman
|
i, ii, iii, iv, v, …
|
| none
|
Маркер отсутствует.
|
| square
|
В качестве маркера выступает закрашенный или незакрашенный квадрат.
|
| upper-alpha
|
A, B, C, D, E, …
|
| upper-latin
|
A, B, C, D, E, …
|
| upper-roman
|
I, II, III, IV, V, …
|
| initial
|
Устанавливает значение свойства в значение по умолчанию.
|
| inherit
|
Наследует значение свойства от родительского элемента.
|
Синтаксис
Ul {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
Синтаксис
Ul {list-style-image: url("images/romb.png");}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
