Урок 20. 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 | Обновление: Май 2012

Урок 19. CSS списки CSS маркер списка Урок 21. CSS изображения

Сохранить в сервисы и закладки