Изменение цвета фона участка web-страницы при наведении курсора мыши с эффектом баннера

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

При наведении курсора мыши участок контента приобретает другой цвет. Помимо этого весь блок em работает как баннер, при клике мышью перенаправляя пользователя на другую страницу.

Примерно так это будет выглядеть:

Реализация эффекта с помощью Html-кода

1. Пропишем стили:

.links ol 
{
list-style-type: none;
width: 90%;
margin-left: 20px;
}
.links li 
{
border: 1px dotted #999;
border-width: 1px 1px;
margin: 0 auto;
}
.links li a 
{ 
color: #0000FF;   /*заголовок*/
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: 90%;
text-align: center; 
margin: 0 auto;
}
.links li a:hover 
{
background: #ADD8E6;  /*общий фон*/
}
.links a em 
{ 
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
text-align: left; 
}
.links a span 
{
color: #008B8B; 
font: normal 80% Verdana, Helvetica, sans-serif;
line-height: 150%;
}

• Из основных параметров здесь можно менять ширину блока с текстом. В примере она составляет width: 90%;. Можно задавать размеры в пикселах, например: width: 600px;
• Цвет текста заголовка изменяется в параметре: .links li a {color: #0000FF;}
• Цветность общего фона выбираем с помощью параметра .links li a:hover {background: #ADD8E6;}
• Чтобы убрать обрамление точками в параметре .links li {border-width: 1px 1px;} проставьте нулевые значения. Если ставится значение 0, то пикселы (px) писать не нужно.

2. А этот HTML-код вставляем между тегами body в нужном месте страницы сайта:

       <div class="links">
       <ol>
	   <li><a href="#" title="yourtext">Заголовок 1

       <em>Абзац №1.</em>
       <em>Абзац №2.</em> 
       <em>Абзац №3.</em>
      

       <span>Дата</span></a></li>

        <li><a href="#" title="yourtext">Заголовок 2

        <em>Абзац №1.</em>
        <em>Абзац №2.</em> 
        <em>Абзац №3.</em>
      

       <span>Дата</span></a></li>

       </ol>

       </div> 

• Вставьте адреса ссылок в участок кода a href="#";
• Впишите title и заголовок;
• Заполните абзацы своим текстом.

Вот и всё. Удачи! L.M.