wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Красивый список html: Примеры красивого оформления списков

alexxlab
No Comments

Содержание

Оформление списков ul li для информационных блоков

.list3a {

    padding:0;

    list-style: none;

    counter-reset: li;

}    

.list3a li {

    position: relative;

    border-left: 4px solid #337AB7;

    padding:16px 20px 16px 28px;

    margin:12px 0 12px 80px;

    -webkit-transition-duration: 0.3s;

    transition-duration: 0.3s;

}

.list3a li:before {

    line-height: 32px;

    position: absolute;

    top: 10px;

    left:-80px;

    width:80px;

    text-align:center;

    font-size: 24px;

    font-weight: bold;

    color: #77AEDB;

    counter-increment: li;

    content: counter(li);

    -webkit-transition-duration: 0.3s;

    transition-duration: 0.3s;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;    

}

.list3a li:hover:before {

    color: #337AB7;

}

.list3a li:after {

    position: absolute;

    top: 26px;

    left: -40px;

    width: 60px;

    height: 60px;

    border: 8px solid #3399FF;

    border-radius: 50%;

    content: »;

    opacity: 0;

    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

    -moz-transition: -moz-transform 0.3s, opacity 0.3s;

    transition: transform 0.3s, opacity 0.3s;

    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);

    -moz-transform: translateX(-50%) translateY(-50%) scale(0.1);

    transform: translateX(-50%) translateY(-50%) scale(0.1);

    pointer-events: none;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;        

}

.list3a li:hover:after {

    opacity: 0.2;

    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);

    -moz-transform: translateX(-50%) translateY(-50%) scale(1);

    transform: translateX(-50%) translateY(-50%) scale(1);

}    

HTML-списки

HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:

маркированный список — <ul> — каждый элемент списка <li> отмечается маркером,
нумерованный список — <ol> — каждый элемент списка <li> отмечается цифрой,
список определений — <dl> — состоит из пар термин <dt> — <dd> определение.

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

Создание HTML-списков

1. Маркированный список

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

<ul>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ul>

Рис. 1. Маркированный список

2. Нумерованный список

Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Блок списка также имеет стили браузера по умолчанию:

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <ol>
АтрибутОписание, принимаемое значение
reversedАтрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
startАтрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">.
typeАтрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).
<ol>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ol>

Рис. 2. Нумерованный список

3. Список определений

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

dl {margin-top: 1em; margin-bottom: 1em;}

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>
  <dt>Режиссер:</dt>
    <dd>Петр Точилин</dd>
  <dt>В ролях:</dt>
    <dd>Андрей Гайдулян</dd>
    <dd>Алексей Гаврилов</dd>
    <dd>Виталий Гогунский</dd>
    <dd>Мария Кожевникова</dd>
</dl>

Рис. 3. Список определений

4. Вложенный список

Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:

<ul>
 <li>Пункт 1.</li>
  <li>Пункт 2.
    <ul>
      <li>Подпункт 2.1.</li>
       <li>Подпункт 2.2.     
        <ul>
          <li>Подпункт 2.2.1.</li>
          <li>Подпункт 2.2.2.</li>
          </ul>
       </li>          
      <li>Подпункт 2.3.</li>
    </ul>
  </li>
 <li>Пункт 3.</li>
</ul>

Рис. 4. Вложенный список

5. Многоуровневый нумерованный список

Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:

<ol>
  <li>пункт</li> <!-1.->
  <li>пункт           
    <ol>
      <li>пункт</li> <!-2.1.->
      <li>пункт</li> <!-2.2.->
      <li>пункт
        <ol>
          <li>пункт</li> <!-2.3.1.->
          <li>пункт</li> <!-2.3.2.->
          <li>пункт</li> <!-2.3.3.-> 
        </ol>
      </li> <!-2.3.->
      <li>пункт</li> <!-2.4.->  
    </ol>
  </li> <!-2.->
  <li>пункт</li> <!-3.->        
  <li>пункт</li> <!-4.->        
</ol>

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

ol {
/* убираем стандартную нумерацию */
list-style: none; 
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ 
counter-reset: li; 
}
li:before {
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
counter-increment: li; 
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li,".") ". "; 
}

Рис. 5. Многоуровневый нумерованный список

Красивое оформление списков на CSS3

1
2
3
4
5
6
7
8
9
10
11
12
13

<ol>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a>
        <ol>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
        </ol>
    </li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>						
</ol>

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

.rounded-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;	
}
 
.rounded-list a:hover {
    background: #eee;
}
 
.rounded-list a:hover:before {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);	
}
 
.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;	
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

<ol>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a>
        <ol>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
        </ol>
    </li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>						
</ol>

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

.rectangle-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;	
}
 
.rectangle-list a:hover {
    background: #eee;
}	
 
.rectangle-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;	
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #fa8072;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}
 
.rectangle-list a:after {
    position: absolute;	
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;				
}
 
.rectangle-list a:hover:after {
    left: -.5em;
    border-left-color: #fa8072;				
}

1
2
3
4
5
6
7
8
9
10

<section>
    <label>Выберите своего динозавра:</label>
    <select>
        <option value="1">Стегозавр</option>
        <option value="2">Велоцираптор</option>
        <option value="3">Спинозавр</option>
        <option value="4">Археоптерикс</option>
        <option value="5">Апатозавр</option>
    </select>
</section>

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon/icomoon.eot?-rdnm34');
    src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
        url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),
        url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'),
        url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
div.cs-skin-border {
    background: transparent;
    font-size: 2em;
    font-weight: 700;
    max-width: 600px;
}
 
@media screen and (max-width: 30em) {
    .cs-skin-border { font-size: 1em; }
}
 
.cs-skin-border > span {
    border: 5px solid #000;
    border-color: inherit;
    transition: background 0.2s, border-color 0.2s;
}
 
.cs-skin-border > span::after,
.cs-skin-border .cs-selected span::after {
    font-family: 'icomoon';
    content: '\e000';
}
 
.cs-skin-border ul span::after {
    content: '';
    opacity: 0;
}
 
.cs-skin-border .cs-selected span::after {
    content: '\e00e';
    color: #ddd9c9;
    font-size: 1.5em;
    opacity: 1;
    transition: opacity 0.2s;
}
 
.cs-skin-border.cs-active > span {
    background: #fff;
    border-color: #fff;
    color: #2980b9;
}
 
.cs-skin-border .cs-options {
    color: #2980b9;
    font-size: 0.75em;
    opacity: 0;
    transition: opacity 0.2s, visibility 0s 0.2s;
}
 
.cs-skin-border.cs-active .cs-options {
    opacity: 1;
    transition: opacity 0.2s;
}
 
.cs-skin-border ul span {
    padding: 1em 2em;
    backface-visibility: hidden;
}
 
.cs-skin-border .cs-options li span:hover,
.cs-skin-border li.cs-focus span {
    background: #f5f3ec;
}

.text ul{

list-style-type: square;

}

#opisanie .text ul {

    list-style-image: url(«images/galochka2.png») ;

    font-size: 16px;

}

<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li>
  …
  <li>элемент n</li>
</ul>

<ul type="disk"> заполненный диск
<ul type="circle"> окружность 
<ul type="square"> квадрат

1
2
3
4
5
6
7

<ol>
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li>
  …
  <li>элемент n</li>
</ol>

<ol type = "a">
<ol type = "A">
<ol type = "I">
<ol type = "1">

1
2
3
4
5
6
7
8
9

<dl>
<dt>Пункт 1
  <dd>Элемент пункта 1
  <dd>Элемент пункта 1
<dt>Пункт 2
  <dd>Элемент пункта 2
<dt>Пункт 3
  <dd>Элемент пункта 3
</dl>

1
2
3
4
5
6
7
8
9
10

<dl><strong>Смешанный список</strong>
	<dt><i>Новость дня</i>
		<dd>
			<li>Сегодня идет дождь</li>
			<li>Дождь будет идти весь день</li>
	<dt><i>Новость ночи</i>
		<dd>
			<li>Ночью будет идти дождь</li>
			<li>Завтра начнется новый день</li>
</dl>

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ul>
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
</body>
</html>

Название маркераЗначение атрибута «type»Пример списка
Маркеры в виде кругаdisc

  • Земля

  • Сатурн

  • Венера

Маркеры в виде незакрашенного кругаcircle
Маркеры в виде квадратаsquare

  • Лужа

  • Озеро

  • Море

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
    <title>Пример маркированного списка с маркером в виде пустого круга</title>
</head>
<body>
    <p>Звезды:</p>
    <ul type="circle">
        <li>Сириус</li>
        <li>Арктур</li>
        <li>Поллукс</li>
        <li>Бетельгейзе</li>
        <li>Солнце</li>
    </ul>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>
    <title>Пример маркированного списка с маркером в виде квадрата</title>
</head>
<body>
    <p>Виды птиц:</p>
    <ul type="square">
        <li>Ара зеленокрылый</li>
        <li>Дрозд рябинник</li>
        <li>Индейка палевая</li>
    </ul>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
    <title>Пример стандартного нумерованного списка</title>
</head>
<body>
    <p>От одного до пяти:</p>
    <ol>
        <li>Первый</li>
        <li>Второй</li>
        <li>Третий</li>
        <li>Четвертый</li>
        <li>Пятый</li>
    </ol>
</body>
</html>

Название маркераЗначение атрибута «type»Пример списка
Маркеры в виде арабских чисел1

  • Бадминтон

  • Бейсбол

  • Бокс

Маркеры в виде строчных латинских буквa

  • Джомолунгма

  • Чогори

  • Канченджанга

Маркеры в виде заглавных латинских буквA

  • Summit Plummet

  • Tantrum Alley

  • Insano

Маркеры в виде римских цифр в нижнем регистреi

  • Филиппинское море

  • Аравийское море

  • Коралловое море

Маркеры в виде римских цифр в верхнем регистреI

  • Красный

  • Зеленый

  • Синий

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
    <title>Произвольная нумерация для нумерованного списка</title>
</head>
<body>
    <p>Начинаем нумерацию с двенадцати:</p>
    <ol type="a" start="12">
        <li>Двенадцать</li>
        <li>Тринадцать</li>
        <li>Четырнадцать</li>
        <li>Пятнадцать</li>
        <li>Шестнадцать</li>
    </ol>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
    <title>Вложенный маркированный список HTML</title>
</head>
<body>
    <ul>
        <li>Citroen
            <ul>
                <li>Berlingo</li>
                <li>C1</li>
                <li>C2</li>
                <li>C3 Picasso</li>
                <li>C4 Grand Picasso</li>
            </ul>
        </li>
        <li>KIA</li>
        <li>Toyota</li>
        <li>Audi</li>
        <li>Lexus</li>
    </ul>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
    <title>Нумерованные, маркированные и многоуровневые списки в HTML</title>
</head>
<body>
    <ul>
        <li>Первая группа тюльпанов
            <ol>
                <li>Первый класс
                    <ul>
                        <li>Простые ранние тюльпаны</li>
                    </ul>
                </li>
                <li>Второй класс
                    <ul>
                        <li>Махровые тюльпаны</li>
                    </ul>
                </li>
            </ol>
        </li>
    </ul>
</body>
</html>