В этом уроке мы будем учиться делать такие, блоки, которые при наведении на них курсора мыши подсвечиваются.

Реализация данного метода состоит из 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 и цвета подсветки блоков и текста устанавливайте на своё усмотрение, в зависимости от того, какой ширины и раскраски должны быть Ваши блоки.

Добавлено: 10 Мая 2018 11:31:25 Добавил: Андрей Ковальчук Нравится 0

Добавить