CSS список и изображение или картинка вместо маркера

CSS атрибуты и значения, определяющие списки с изображением

Представим изображение как элемент списка:

<head>

          <title>Изображение в роле маркера списка</title>

          <style type="text/css">

          .list_img li {

          list-style: none;

          line-height: 170%;

          padding-left: 25px;

          background: url(../images/pencil2.png) no-repeat left 50%

          }

          </style>
 </head>

          <body>

          <ul class="list_img">

          <li>Sony</li>

          <li>Asus</li>

          <li>Dell</li>

          <li>Toshiba</li>

          <li>Acer</li>

          <li>Lenovo</li>

          </ul>

          </body>

line-height:170% определяет расстояние между строчками по вертикали.

Результат: списки + изображение + CSS + картинки

Правильно будет написать line-height: 170% или line-height:170%, но не line-height:170 %. Единицы измерения не должны отделяться от величин.

Определяем CSS маркер списка в виде изображения

CSS списки, у которых вместо маркеров – изображения, можно создавать так:

<head>

          <style type="text/css">

          ul.list_img {list-style: url(../images/pencil2.png) outside; line-height: 170%}

          </style>
 </head>

          <body>

          <ul class="list_img">

          <li>Sony</li>

          <li>Asus</li>

          <li>Dell</li>

          <li>Toshiba</li>

          <li>Acer</li>

          <li>Lenovo</li>

          </ul>

          </body>

Результат: изображения и списки

Подробнее об атрибуте list-style: в главе CSS справочника списки.

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS списки Картинка и рисунок для CSS списка CSS изображения