В этом уроке мы будем учиться делать такие, блоки, которые при наведении на них курсора мыши подсвечиваются. Пример таких блоков Вы можете посмотреть здесь Реализация данного метода состоит из HTML и CSS части. HTML часть: <div id="links"> <ul> <li><a href="#" title="yourtext">Название <em>Описание</em> <span>Дата</span></a></li> <li><a href="#" title="yourtext">Название <em>Описание</em> <span>Дата</span></a></li> </ul> </div> Блоков может быть и больше, добавляются они дублированием контейнера <li></li> CSS часть: #links ul { list-style-type: none; width: 700px; } #links li { border: 1px dotted #999; border-width: 1px 0; margin: 5px 0; } #links li a { color: #990000; display: block; font: bold 120% Arial, Helvetica, sans-serif; padding: 5px; text-decoration: none; } * html #links li a { /* make hover effect work in IE */ width: 700px; } #links li a:hover { background: #ffffcc; } #links a em { color: #333; display: block; font: normal 85% Verdana, Helvetica, sans-serif; line-height: 125%; } #links a span { color: #125F15; font: normal 70% Verdana, Helvetica, sans-serif; line-height: 150%; } Свойство width и цвета подсветки блоков и текста устанавливайте на своё усмотрение, в зависимости от того, какой ширины и раскраски должны быть Ваши блоки.