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

При оформлении списков всегда есть желание выделить их наиболее красиво, чтобы они выделялись и привлекали внимание своим оформлением, и часто получается не так как хочется. В этом уроке я расскажу и покажу как можно оформить списки на CSS3 без изображений.

Пример оформления можно увидеть здесь:

Посмотреть примерСкачать

К сожалению только Mozilla поддерживает переходы псевдоэлементов, поэтому чтобы увидеть данный эффект используйте браузер Mozilla.

1 вид. Поворот цифры при наведении на элемент списка

Сначала создадим вот такой список.

HTML часть

Ниже вы можете увидеть структуру упорядоченного списка, который будем красиво оформлять:

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>

CSS часть

А сейчас добавим оформление нашему списку:

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;
}

2 вид. Добавляется уголок при наведении на элемент списка

А это второй вариант оформления списка.

HTML часть

Структура такая же, как у прошлого списка:

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>

CSS часть

Но оформление будет немного другое:

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;				
}

Вывод

Жаль пока что только Mozilla поддерживает переходы псевдоэлементов, об этом я уже писал в прошлом уроке CSS3 навигация с переходами. Но за основу смело можно брать данное оформление, т.к. оно явно привлечет внимание вашего посетителя :).

Успехов!

Источник: www.red-team-design.com

sitehere.ru

Как сделать красивый маркированный список HTML?

Здравствуйте, дорогие посетители!

В одной из прошлых статей я рассказывала, как можно красиво оформить нумерованный список HTML. С этой статьей вы можете ознакомиться по этой ссылке.

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

Навигация по статье:

Создание маркера для маркированного списка HTML

В отличие от случая с нумерованным списком HTML, где мы самостоятельно добавляли нумерацию, а затем оформляли цифры при помощи CSS-стилей, с маркированными списками все выглядит немного иначе.

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

1. 1.circle — кружок
2. 2.disc — точка
3. 3.square – квадрат

Пример использования:

.text ul{ list-style-type: square; }

В данном случае у элементов будут метки в виде квадратиков.

Если же мы хотим задать свои маркеры, то для начала нам нужно подготовить картинку самостоятельно.

Сделать это можно двумя способами:

1. 1.Нарисовать, например, в PhotoShop.
2. 2.В поиске Яндекс сделать запрос «маркер для списка». Яндекс выдаст вам огромное количество всевозможных заготовок:

Все, что вам остается сделать, это выбрать понравившееся изображение и в PhotoShop или любом другом редакторе подогнать его размер. В зависимости от размера текста и оформления сайта размер маркера может быть разным, но, как правило, для шрифта размером 14px подходят маркеры с размерами 20х20 или 25х25 пикселей.

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

Как задать свой маркер для маркированного списка HTML?

Теперь, когда у нас все готово, мы можем в файле стилей нашего сайта применить наш уникальный маркер. Для этого нужно дописать для ul свойство list-style-image в таком виде:

#opisanie .text ul { list-style-image: url(«images/galochka2.png») ; font-size: 16px; }

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

В данном случае я использовала маркер в виде галочки размером 20х20 пикселей. Вот что у меня получилось:

Как видите, заменить маркер для маркированного списка HTML совсем не сложно, но в результате ваш список будет оформлен намного красивее и оригинальнее.

Если данная статья вам понравилась и была для вас полезной, обязательно напишите мне об этом в комментариях и не забудьте поделиться ею в социальных сетях.

Я на сегодня у меня все. Успехов вам и вашим проектам! До встречи в следующих статьях!

С уважением Юлия Гусарь

HTML-списки

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

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

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

Создание 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>

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

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

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

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

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

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

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

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>

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>

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,".") ". "; 
}

html5book.ru

Как сделать красивый нумерованный список HTML?

Приветствую вас, дорогие друзья, на сайте Impuls-Web!

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

Навигация по статье:

Как будет выглядеть такой нумерованный список HTML, вы могли вдеть в большинстве моих статей. Так как я уже давно пользуюсь таким способом стилизации списков, и считаю, что такой вариант оформления намного интереснее, чем обычные серые цифры.

Код нумерованного списка HTML

Итак, суть данного способа заключается в том, что для начала мы создаем заготовку кода c нумерованным списком HTML, в котором задаем нумерацию самостоятельно. А далее, при помощи CSS-стилей делаем стилизацию цифр, подгоняя его оформление под дизайн нашего сайта.

Вот как выглядит код для измененного нумерованного списка HTML:

<ol> <li><span>1.</span>Текст</li> <li><span>2.</span>Текст</li> …. </ol>

Вы можете использовать данную заготовку HTML-кода, и css-стили, которые я покажу ниже, и использовать их у себя на сайте.

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

CSS-стили нумерованного списка HTML

Далее нам нужно открыть в текстовом редакторе файл стилей нашего сайта и в самом конце дописать следующие стили:

.num-list li { margin-bottom: 15px; margin-top: 10px; list-style: none; } .num-list li span{ background: #05A4E8; /*фон */ color: #FFF; /* цвет цифр */ margin-right: 10px; /* правый отступ */ padding: 3px 6px; /* внутренние отступы */ font-weight: bold; /*жирность цифр */ font-size:16px; /*размер шрифта */ border-radius:12px; /*скругление углов */ }

В первом фрагменте стилей с селектором .num-list li мы добавляем верхний и нижний отступ для пунктов, и убираем стандартную нумерацию.

Во втором фрагменте мы добавляем стилизацию для нашей нумерации. В частности, задаем фон, цвет цифр, внутренние отступы, задаем шрифт и радиус скругления углов для тега span.

Вот что у нас получилось:

1. 1.Пункт 1
2. 2.Пункт 2
3. 3.Пункт 3

Итак, как видите, все довольно просто. Вам остается только взять эти заготовки HTML-кода и CSS-стили, и немного подправив, вы можете свободно использовать их на своем сайте.

А на этом у меня, пожалуй, на сегодня все. Надеюсь, показанный в данной статье код для стилизации маркированных списков будут для вас полезны. Если данная статья вам понравилась, обязательно поделитесь ею в социальных сетях и оставьте свой комментарий.

До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Слайдеры изображений, красивые списки, кнопки и ещё несколько классных вещей на JQuery и CSS3

Приветствую Вас, дорогие читатели блога beloweb.ru. Сегодня спешу представить Вам очередную подборку очень красивых и стильных вещей, которые Вы можете использовать для своего сайта. А именно здесь Вы увидите несколько классных JQuery слайдеров изображений, оформление цитат для сайта, несколько примеров выпадающих списков и многое другое не менее интересное и красивое.

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

Если Вы пропустили прошлые подборки, то обязательно посмотрите, я уверен, что и там Вы найдёте много чего интересного:

Несколько примеров красивых выпадающих списков с JQuery и CSS3

Очень красивые выпадающие списки для Ваших сайтов. Так же есть целых 5 примеров на выбор.

Пример ι Скачать исходники

Вертикальный слайдер с использованием JQuery

Замечательный и большой слайдер изображений и контента. Очень подойдёт и пригодится для стильных интернет магазинов.

Пример ι Скачать исходники

3D меню как в ресторанах на JQuery

Очень красивый эффект раскрытия текста на странице.

Пример ι Скачать исходники

Красивое и полноэкранное слайд шоу из видеозаписей

Другими словами — красивый полноэкранный слайдер только вместо картинок стоят видеозаписи.

Пример ι Скачать исходники

Красивые кнопки включения и выключения с CSS3

4 примера красивых кнопок включения и выключения чего либо на сайте.

Пример ι Скачать исходники

Красивые типографические эффекты на CSS3 и JQuery

Очень красивые 8 примеров типографии при наведении для Вашего сайта.

Пример ι Скачать исходники

Очень красивый график для сайта

Ну просто замечательный и стильный график для современных порталов.

Пример ι Скачать исходники

Классный 3D слайдер для сайта с JQuery

Замечательный слайдер изображений для Вашего сайта с очень красивыми эффектами.

Пример ι Скачать исходники

Круговые эффекты при наведении с помощью CSS3

7 удивительных примеров красивых круговых эффектов при наведении.

Пример ι Скачать исходники

Очень красивая и необычная галерея с миниатюрами

Замечательная галерея для Вашего сайта. Миниатюры находятся в очень красивых блоках, при клике на которые открывается полное фото.

Пример ι Скачать исходники

Очень красивое оформление цитат на сайт

Самое необычное и красивое оформление цитат для сайта. К тому же есть целых 6 примеров.

Пример ι Скачать исходники

Красивые круги с плавным открыванием

Замечательная идея для не больших заметок на сайте.

Пример ι Скачать исходники

beloweb.ru

Создание списков в html и виды списков

Цель урока: знакомство с тегами создания списков в HTML

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

В HTML поддерживается работа со всеми вилами списков, рассмотрим их

Неупорядоченный список HTML

Неупорядоченный или ненумерованный список HTML содержит следующие теги:

Синтаксис:

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

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

Т.е. каждый пункт списка должен начинаться тегом li и завершаться его закрывающей парой, вместо которого будет отображаться маркер (диск, окружность или квадрат — зависит от предустановок браузера)

Чтобы задать вид маркера, необходимо использовать атрибут type:

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

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

Упорядоченный список HTML

Упорядоченный список в HTML или нумерованный список практически такой же, как и ненумерованный, за исключением первого главного тега:

Синтаксис:

1 2 3 4 5 6 7

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

<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">

<ol type = «a»> <ol type = «A»> <ol type = «I»> <ol type = «1»>

Можно также применять к отдельному пункту:

Для того, чтобы продолжить список с определенного номера:

Многоуровневый список HTML

Списки с определениями или многоуровневые списки в HTML создаются следующим образом:

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>

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

Результат:

Красивый список html или смешанный список

Чтобы сделать список максимально красивым, можно использовать в одном списке разные виды списков. Рассмотрим пример:

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>

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

Результат:

• Откройте файл
• Создайте смешанный список
• Используйте нумерованный и маркированный список html и список определений так, чтобы:
• вместо знака - отображался маркер
• вместо порядковых чисел и букв (1, 2, 3, a, b, c) отображались соответствующие им числа и буквы автоматически
• знак -, порядковые числа и буквы из текста удалить

labs-org.ru