Списки легко читается с другим цветом и наведении курсора мыши эффект

В этой статье мы рассмотрим, как создать простые списки, которые легко читаемым для пользователя.
Для этого мы будем использовать два простые меры предосторожности:

• чередующиеся цвета для разных строках списка;
• Выделите выбранной строке при наведении курсора мыши.

Давайте сделаем пример и сказать, что мы могли бы показать пользователю список продуктов, имеющихся в нашем электронном магазине. Ниже результат, что мы добьемся:

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

Для того, чтобы наш список, мы использовали простой HTML-таблицы, несколько инструкций и немного CSS DHTML, чтобы оживить его. Но давайте градусов.

Давайте начнем с CSS и см. ниже содержание нашей таблице стилей:

 table.tbElenco







 {



  



 границы: 1px твердых # 808080;



  



 семейство шрифтов: Verdana, Arial, Tahoma;



  



 Размер шрифта: 10px;



  



 цвет: # 000000;







 }







 table.tbElenco й







 {



  



 фон: # 808080;



  



 цвет: # FFFFFF;



  



 начертание шрифта: жирный;







 }







 table.tbElenco TD







 {



  



 границы вниз: 1px твердых # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 фон: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 фон: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 фон: # FFFF00;







 }

То, что мы сделали очень просто: сначала мы стилизованные таблице путем присвоения класса в целом («tbElenco '), то мы стилизованные и <td> <th> всей ее полноте, то мы создали три различных класса, соответствующие трем Статус наших различных линиях: нормальный, заместителей и подсвечиваются.

Давайте проследим код нашей таблице:

 <table cellspacing="0" cellpadding="2" class="tbElenco">







 <tr>







 <th> товаров </ TH>







 <th> Кол </ TH>







 <th> Цена </ TH>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> камера </ TD>







 <td> 3 </ TD>







 <td> 100,00 евро </ TD>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> Mobile </ TD>







 <td> 2 </ TD>







 <td> 150,00 евро </ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> 20-дюймовый ЖК-телевизор </ TD>







 <td> 1 </ TD>







 <td> 220,00 евро </ TD>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> MP3-плеер </ TD>







 <td> 1 </ TD>







 <td> 60,00 Euro </ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> DVD плеер </ TD>







 <td> 1 </ TD>







 <td> 80,00 Euro </ TD>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> Консольные игры </ TD>







 <td> 1 </ TD>







 <td> 200,00 евро </ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> GPS-навигатор </ TD>







 <td> 7 </ TD>







 <td> 140,00 евро </ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 Mini-DVD видеокамера <td> </ TD>







 <td> 1 </ TD>







 <td> 270,00 евро </ TD>







 </ TR>







 </ TABLE>

Как вы можете видеть, что это тривиальная HTML-таблицы, где мы позаботились, чтобы назначить либо на разных линиях (<tr>) классов «нормальный» и «AC».

Чтобы стимулировать появление строки на линии мышей мы связываем элемент (<tr>) OnMouseOver и onmouseout события, которые обеспечивают соответственно динамическое назначение 'выделить' класса при наведении и вернуться в класс начинаются, когда мышь покидает подряд.