|
|
Окончание табл. 8.2 |
|
1 |
|
2 |
|
|
Нумерованный список со строчными римскими |
|
|
<li style="list-style: lower- |
цифрами: |
|
|
roman"> |
i. |
текст |
|
ii. |
текст |
|
|
|
|
||
|
iii. |
текст |
|
|
Нумерованный список с заглавными римскими |
|
|
<li style="list-style: upper- |
цифрами: |
|
|
roman"> |
I. |
текст |
|
II. |
текст |
|
|
|
|
||
|
III. |
текст |
|
|
Нумерованный список со строчными буквами |
|
|
<li style="list-style: lower- |
латинского алфавита: |
|
|
alpha"> |
a. |
текст |
|
b. |
текст |
|
|
|
|
||
|
c. |
текст |
|
|
Нумерованный список с заглавными буквами |
|
|
<li style="list-style: upper- |
латинского алфавита: |
|
|
alpha"> |
A. |
текст |
|
B. |
текст |
|
|
|
|
||
|
C. |
текст |
|
|
8.1. Типовое задание |
||
Пример 1. Создайте |
на |
Web-странице ненумерованный список (с |
|
использованием CSS) следующего вида: Виды списков
o
o
o
маркированный
нумерованный
многоуровневый
Пример 2. Рассмотрите и проанализируйте решение практического задания:
<html>
<head>
<title>Шрифт в списках</title> <style type="text/css">
UL {font-family: Georgia, "Times New Roman", Times, serif
/* Путь к файлу с маркером */
99
margin-top:0.5em margin-bottom:0.5em margin-left: 40px
}
/* Отступ от верхнего края */ /* Отступ от нижнего края */ /* Отступ от левого края */
LI{ |
|
padding-left: 20px |
/* Отступ от маркера до текста */ |
} |
|
LI SPAN{ |
|
color: blue |
/* Цвет текста в списке */ |
} |
|
</style> |
|
</head>
<body>
<ul>Виды списков
<li style="list-style: circle"><span>Маркированный</span></li>
<li style="list-style: circle"><span>Нумерованный</span></li> <li style="list-style: circle"><span>Многоуровневый</span></li> </ul>
</body>
</html>
Пример 3. Создайте на Web-странице многоуровневый список (с использованием CSS) следующего вида (рис. 8.1):
Рис. 8.1. Многоуровневый список
Пример 3. Рассмотрите и проанализируйте решение практического
задания. |
|
<html> |
|
<head> |
|
<style type="text/css"> |
|
OL LI {font-weight: bold} |
/* Выделение пунктов */ |
OL OL { list-style: lower-alpha} |
/* Тип нумерации подпунктов */ |
100
OL OL LI { font-weight: normal} /* Оформление подпунктов */ </style>
</head>
<body>
<hr>
<ol>
<li> Пункт 1 </li> <ol>
<li> Подпункт a </li>
<li> Подпункт b </li> </ol>
<li> Пункт 2 </li> <ol>
<li> Подпункт a </li>
<li> Подпункт b </li> </ol>
</ol>
<hr>
</body>
</html>
8.2.Контрольные вопросы
1.Виды списков в CSS.
2.Свойства CSS для управления видом списка.
3.Использование изображений в качестве маркера.
8.3.Контрольные задания
Пример 1. Создайте на Web-странице список (с использованием CSS) следующего вида:
Варианты
1 |
2 |
3 |
4 |
5 |
6 |
Маркиро- |
Нумерован- |
Многоуровне- |
Маркирован- |
Нумерован- |
Многоуров- |
ванный, тип |
ный с |
вый, тип |
ный, тип |
ный со |
невый, тип |
маркера в |
заглавными |
маркеров 1-го |
маркера в |
строчными |
маркеров 1- |
виде диска, |
римскими |
уровня – |
виде |
буквами |
го уровня – |
цвет текста |
цифрами, |
арабские цифры, |
окружности, |
латинского |
заглавные |
– fuchsia |
цвет текста |
2-го уровня |
цвет текста – |
алфавита, |
римские |
|
– maroon |
строчные |
yellow |
цвет текста |
цифры, 2-го |
|
|
римские цифры, |
|
– navy |
уровня – |
|
|
цвет текста – |
|
|
маркеры в |
|
|
olive |
|
|
виде |
|
|
|
|
|
квадрата, |
|
|
|
|
|
цвет текста |
|
|
|
|
|
– teal |
101
Лабораторная работа № 9
ОРГАНИЗАЦИЯ И ФОРМИРОВАНИЕ ТАБЛИЦ
Цель работы: приобрести навыки создания таблиц различных структур;
Методические указания
Формирование таблицы на Web-странице сопровождается прорисовкой браузером ее рамок. Размер рамок автоматически согласовывается с размером окна просмотра браузера, размером текстов и изображений в ячейках таблицы.
При построении таблицы используются теги трех групп:
1)основной элемент описания таблицы — тег < Table >… < /table >;
2)определение строк в таблице — тег < Тr >;
3)описание ячеек в таблице — теги < Td > и < Th >.
Тег <Table> </table> использует целый ряд дополнительных атрибутов: align, width, border, cellspacing, cellpadding. В дальнейшем рассмотрим назначения каждого атрибута в отдельности.
Для выравнивания таблицы на странице применяется атрибут align:
•align = "left" — выравнивание таблицы по левому краю;
•align = "center"— выравнивание таблицы по центру;
•align = "right" — выравнивание таблицы по правому краю.
Ширина таблицы может быть задана в пикселах или в процентном отношении к ширине страницы, например, width = 450 или width = 40%.
атрибут border = ширина боковой грани в пикселах, атрибут cellspacing = ширина фронтальных граней,
атрибут cellpadding= число пикселей определяет расстояние размера пустого пространства вокруг текста в ячейках.
Сразу за тегом < Table > может быть размещен специальный тег для определения заголовка страницы < Caption > < /caption >.
С помощью атрибута align этом теге заголовок может располагаться над таблицей align = "top" или под таблицей align — "bottom".
Каждую строку в таблице описывает тег < Тr >. Для выравнивания всех
102