Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Август 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML


Информационный Канал Subscribe.Ru
Рецепты HTML
http://html.krsk.ru

CSS Списки

С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера любое изображение. Последняя возможность не поддерживается четвертой версией браузера Netscape Navigator.

В таблице перечислены свойства элементов, предназначенных для создания и изменения списков.

Свойство Значение NC IE Описание Пример
list-style

disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
4+
4+
 Вид маркера. Первые три используются для создания маркированного списка, а остальные - для нумерованного. LI {list-style: circle;}

LI {list-style: upper-alpha;}
list-style-image none
URL
6
4+
 Устанавливает символом маркера любую картинку. LI {list-style-image: url(check.gif)}
list-style position
 outside
inside
6
4+
 Выбор положения маркера относительно блока строк текста. LI {list-style-position: inside;}

NC - Netscape Communicator; IE - Internet Explorer; 4+ означает версию 4 и выше.

Пример 1. Создание маркированного списка
<html>
<head>
<style type="text/css">
LI { list-style: square; list-style-position: outside; color: navy}
</style>
</head>

<body>
<ul>
 <li>Заголовок должен быть короче трех строк;
 <li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
 <li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;
<ul>
</body>
</html>

В примере используются квадратные маркеры и их внешнее размещение относительно текста. Цвет - темносиний.

     
  • Заголовок должен быть короче трех строк;  
  • При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;  
  • Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;

 

Пример 2. Использование изображений в качестве маркера
<html>
<head>
<style type="text/css">
LI { list-style-image: url(images/check.gif); }
</style>
</head>

<body>
<ul>
 <li>Заголовок должен быть короче трех строк;
 <li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
 <li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;
<ul>
</body>
</html>

В качестве маркеров используется маленькая картинка.

     
  • Заголовок должен быть короче трех строк;  
  • При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;  
  • Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;

Некоторые примеры создания различных списков приведен в таблице.

Код HTML Пример
<li style=""list-style:" disk"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style=""list-style:" circle"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style=""list-style:" square"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style=""list-style:" decimal">

Нумерованный список с арабскими цифрами:

  1. текст
  2. текст
  3. текст
<li style=""list-style:" lower-roman">

Нумерованный список с прописными римскими цифрами:

  1. текст
  2. текст
  3. текст
<li style=""list-style:" upper-roman">

Нумерованный список с заглавными римскими цифрами:

  1. текст
  2. текст
  3. текст
<li style=""list-style:" lower-alpha">

Нумерованный список с прописными буквами латинского алфавита:

  1. текст
  2. текст
  3. текст
<li style=""list-style:" upper-alpha">

Нумерованный список с заглавными буквами латинского алфавита:

  1. текст
  2. текст
  3. текст


Copyright Влад Мержевич. По всем вопросам пишите мне по адресу inferos@mail.ru
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное