585134
столько раз учителя, ученики и родители
посетили официальный сайт ООО «Инфоурок»
за прошедшие 24 часа
Добавить материал и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015

Скидка 0%

112 курсов профессиональной переподготовки от 4720 руб.

268 курсов повышения квалификации от 1120 руб.

МОСКОВСКИЕ ДОКУМЕНТЫ ДЛЯ АТТЕСТАЦИИ

Лицензия на осуществление образовательной деятельности №038767 выдана 26 сентября 2017 г. Департаменотом образования города Москвы

Проект «Инфоурок» совместно с Министерством финансов РФ приглашает учителей и всех желающих к участию в Марафоне финансовой грамотности Все участники получат бесплатные документы Принять участие
Инфоурок Информатика КонспектыЛекционный и практический материал по теме "Списки с помощью CSS"

Лекционный и практический материал по теме "Списки с помощью CSS"

библиотека
материалов

Практическая работа №5
Списки

hello_html_3324e475.png

Задание 1hello_html_4b11186.png


ul.a {list-style-type:disc;}
ul.b {list-style-type:circle;}
ul.c {list-style-type:square;}
ul.d {list-style-type:none;}
ol.e {list-style-type:decimal;}
ol.f {list-style-type:decimal-leading-zero;}
ol.g {list-style-type:lower-roman;}
ol.h {list-style-type:upper-roman;}
ol.i {list-style-type:lower-alpha;}
ol.j {list-style-type:upper-alpha;}
ol.k {list-style-type:lower-greek;}
ol.l {list-style-type:lower-latin;}
ol.m {list-style-type:upper-latin;}
ol.n {list-style-type:armenian;}
ol.o {list-style-type:georgian;}

Задание 2

ul {list-style-image:url('image/sqpurple.gif');}

hello_html_m62c9791a.png

Задание 3

Изменить код, чтобы во всех браузерах отображались одинаково.


Задание 4

Свойство списков одной записью.

ul {list-style:square url("image/sqpurple.gif");}


Задание 5

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

Курс профессиональной переподготовки
Учитель информатики
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Краткое описание документа:

С помощью CSS вы можете изменить:

·       маркеры пунктов упорядоченного списка

·       маркеры пунктов неупорядоченного списка

·       вставить изображение в качестве маркера

 

Список

В HTML существуют два типа списков:

·       неупорядоченный список — пункты списка маркируются буллетами (графическая фигура, кружок или квадрат)

·       упорядоченный список — пункты списка маркируются буквами или цифрами

 

Различные маркеры списков

Тип маркера списка можно изменить с помощью свойства list-style-type:

Пример

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Значения свойства list-style-type различаются для упорядоченных и неупорядоченных списков.

Маркеры неупорядоченных списков

Значение

Описание

none

Нет маркеров

disc

Значение по умолчанию. Маркер в виде закрашенного кружка

circle

Маркер в виде незакрашенной окружности

square

Маркер в виде квадрата

Маркеры упорядоченных списков

Значение

Описание

armenian

Традиционная армянская нумерация

decimal

Числовая нумерация

decimal-leading-zero

Числовая нумерация с нулем перед цифрой (01, 02, 03)

georgian

Традиционная грузинская нумерация (an, ban, gan)

lower-alpha

Строчные латинские буквы (a, b, c, d, e)

lower-greek

Строчные греческие буквы (alpha, beta, gamma)

lower-latin

Строчные латинские буквы (a, b, c, d, e)

lower-roman

Римские цифры в нижнем регистре (i, ii, iii, iv)

upper-alpha

Заглавные латинские буквы (A, B, C, D, E) 

upper-latin

Заглавные латинские буквы (A, B, C, D, E)

upper-roman

Римские цифры в верхнем регистре (I, II, III, IV, V)

Заметка: ни одна версия Internet Explorer (включая IE8) не поддерживает следующие значения свойства list-style-type: "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian" и "georgian".

 

Использование изображения в качестве маркера

Для того, чтобы отображать в качестве маркера ваше изображение, используйте свойство list-style-image:

Пример

ul
{
list-style-image: url('sqpurple.gif');
}

 

Этот пример сгенерирует различный результат в разных браузерах. В IE и Opera маркер будет отображаться чуть выше, чем в Firefox, Chrome и Safari.

Общая информация
ВНИМАНИЮ УЧИТЕЛЕЙ: хотите организовать и вести кружок по ментальной арифметике в своей школе? Спрос на данную методику постоянно растёт, а Вам для её освоения достаточно будет пройти один курс повышения квалификации (72 часа) прямо в Вашем личном кабинете на сайте "Инфоурок".

Пройдя курс Вы получите:
- Удостоверение о повышении квалификации;
- Подробный план уроков (150 стр.);
- Задачник для обучающихся (83 стр.);
- Вводную тетрадь «Знакомство со счетами и правилами»;
- БЕСПЛАТНЫЙ доступ к CRM-системе, Личному кабинету для проведения занятий;
- Возможность дополнительного источника дохода (до 60.000 руб. в месяц)!

Пройдите дистанционный курс «Ментальная арифметика» на проекте "Инфоурок"!

Подать заявку


Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.