Четверг, 03 Мая 2012 14:33

Красивые списки при помощи css

Written by 
Оцени эту запись
(8 Голоса)

Рассмотрим ненумерованный список ul:

 

  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5

 

И попробуем ему задать красивые стили CSS.  Квадратик перед элементом списка называется маркером. Задать вид маркера в css можно таким образом

 

<ul style="list-style-type: square;"></ul>

 

Для ненумерованного списка маркеры могут быть квадратные(square), круглые(disc), круглые пустые(circle). Также в виде маркера можно задать картинку.

 

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

 

<ul style="list-style-image: url('/../images/li_bg.png');"></ul>

или в виде фона элемента списка <ul><li style="background: url('/../images/li_bg.png') left center no-repeat;"></li></ul>

 

  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5

 

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

 

Можем побавить изменение стилей при наведении на элементы списка. Например, сделаем маркер другого цвета (для этого нужна другая картинка) и изменим цвет текста:

 

 

  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5

 

Для этого мы прописали:

 

ul.nice_ul li:hover {background: url(http://kate-land.net/images/li_h_bg.png) left center no-repeat; color: #fff;}

 

где nice_ul - класс нашего красивого списка.

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов