Как красиво оформить списки?

Telegram

Теперь мы есть в телеграмм!  t-do.ru/interestinglife_ru

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


 

 Как оформляются списки в HTML?

Списки бывают нумерованными и ненумерованными.

Нумерованные списки выводятся кодом:

<ol>Список с цифрами

    <li>пункт 1</li>

    <li>пункт 2</li>

    <li>пункт 3</li>

</ol>

Не нумерованные списки выводятся кодом:

<ul>Список с галочками или другими символами

    <li> пункт 1</li>

    <li> пункт 1</li>

    <li> пункт 1</li>

</ul>

Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста.Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей.

Для нумерованного списка прописываются стили нумерации для каждого пункта.

Стандартные арабские цифры описываются значением decimal.

list-style-type: decimal; /*арабские цифры*/

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

list-style-type: circle; /*кружки*/
list-style-type: square; /*квадраты*/

Каждому пункту меню можно назначить изображение.

list-style-image: url(‘путь к изображению’);

Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный.

Где стили списков прописаны в шаблоне Twenty Eleven?

Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */

Стандартный код выглядит вот так:

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

НУМЕРОВАННЫЙ СПИСОК С ИСПОЛЬЗОВАНИЕМ ФОНА

Посмотрите на данное оформление нумерованного списка.

Как это повторить?

Найдите стили для тега 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

ol {

padding: 0px 0 0 20px;

margin: 0.5em 0 1.571em 1.9em;

color: #2E2E2E;

list-style-type: none;

font: 15px/17px Verdana, Arial, Helvetica, sans-serif;

z-index: 2;

counter-reset: point;

}

  

ol li {

margin-bottom: 4px;

line-height: 1.6;

color: #2E2E2E;

position: relative;

}

  

ol li:before {

margin-bottom: 4px;

counter-increment: point 1;

line-height: 1.6;

height: 24px;

margin-left: -36px;

left: 0px;

width: 24px;

margin-top: 1px;

background: #BDC3C7;

content: counter(point);

text-align: center;

position: absolute;

font-weight: bold;

}

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

list-style-type: none; — отключает вывод стандартных цифр
counter-reset: point; — задает переменную для счетчика нумерации
position: relative; — размещает нумерацию возле самих пунктов

before — псевдоэлемент для тега ol li. Имеет следующие стили:
content: counter(point); — выводит значение переменной
counter-increment: point 1; — увеличивает счетчик на 1
position: absolute;
background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой
margin – внешние отступы
padding – внутренние отступы
color – цвет текста элемента
background – фон
text-align – выравнивание текста
font-weight – толщина (насыщенность) шрифта

В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы.

Как оформить маркированный (ненумерованный) список?

МАРКИРОВАННЫЙ СПИСОК UL LI С ЧЕРЕДУЮЩИМИСЯ ИКОНКАМИ

Рассмотрим вот такой маркированный список

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

ul {

padding: 11px 0 5px 0;

}

  

ul li {

padding-left: 32px;

margin-bottom: 10px;

font: normal 15px Verdana, sans-serif;

color: #2E2E2E;

line-height: 1.6;

border-bottom: 1px dashed #ccc;

padding-bottom: 10px;

}

  

ul li:before {

content: "";

position: absolute;

width: 27px;

height: 24px;

margin-left: -35px;

margin-top: -2px;

background: url('images/sprite.jpg') 0px 2px no-repeat;

list-style-type: circle;

}

  

ul li:nth-child(2n):before {

content: "";

position: absolute;

width: 27px;

height: 43px;

margin-left: -35px;

margin-top: -2px;

background: url('images/sprite.jpg') 0px -17px no-repeat;

list-style-type: circle;

}

 

Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента.

Для эксперимента можно назначить отступы:

1

2

3

4

ul li{

list-style-image: url(images/radio.png);

margin-left: 30px;

}

Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before.

В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты.

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

Также каждому пункту можно назначить рамки, фон, иконки. 

Как вывести на странице несколько списков с разным оформлением?

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

Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили.

Вот, например, один вариант оформления содержания:

В HTML вы пропишите список так:

1

2

3

4

5

<ol id="sod">Содержание

    <li>пункт 1</li>

    <li>пункт 2</li>

    <li>пункт 3</li>

</ol>

В CSS вы пропишите стили так:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

ol#sod{

padding: 0px 20px 10px 51px;

margin: 0.5em 0 0em 1em;

color: #2E2E2E;

list-style-type: none;

background: #f1f4f5;

border-left: #BDC3C7 4px solid;

display: inline-block;

}

  

ol#sod li{}

  

ol#sod li:before{

font-weight:normal !important

}

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

Используя в тексте несколько разных по оформлению списков, вы сделаете подачу информации еще интереснее. При перечислении каких-либо предметов можно задать одни иконки, а при перечислении действий — другие. Здесь уже дизайн ограничивается только вашей фантазией.

Эти методы применимы и в дизайне пунктов меню, рубрик и любых других элементов сайта.


Язык HTML для начинающих

Основы CSS для начинающих

Как пользоваться Sublime text