Листе лако читају са алтернативни боја и моусеовер ефекат

У овом чланку ћемо видети како да креирате једноставне листе, који се лако читљив за корисника.
Да бисте то урадили ми ћемо користити два једноставна мера:

• наизменично боја за различите редове листе;
• Истакните изабраних редова на моусеовер.

Хајде да пример и рећи да смо могли показати корисник списак производа који су доступни у наш е-цоммерце сајт. Испод тога да ћемо постићи:

Као што је евидентно коришћење наизменично боја за различите линије лакши за читање различите ставке у листи, док је присуство маркер на миша чини још непосредно релевантне у ред за тему нашег интересовања.

Да би наш списак, користили смо једноставан ХТМЛ табелу, неколико упутстава и мало ЦСС ДХТМЛ да га окрепити. Али, хајде да степени.

Почнимо са ЦСС-а и види испод садржај нашег стила:

 табле.тбЕленцо







 {



  



 бордер: 1пк солид # 808080;



  



 фонт-фамили: Вердана, Ариал, Тахома;



  



 фонт-сизе: 10пк;



  



 цолор: # 000000;







 }







 табле.тбЕленцо Тх







 {



  



 бацкгроунд: # 808080;



  



 цолор: # ФФФФФФ;



  



 фонт-веигхт: болд;







 }







 табле.тбЕленцо тд







 {



  



 бордер-боттом: 1пк солид # цццццц;







 }







 табле.тбЕленцо тр.нормале







 {



  



 бацкгроунд: # ФФФФФФ;







 }







 табле.тбЕленцо тр.алтерната







 {



  



 бацкгроунд: # ееееее;







 }







 табле.тбЕленцо тр.евидензиата







 {



  



 бацкгроунд: # ФФФФ00;







 }

Оно што смо урадили је врло једноставан: прво смо стилизованог стола додељивањем класе као целине ("тбЕленцо '), онда стилизована и <тд> <тх> целости, онда створили смо три различите класе које одговарају три статуса нашег различитих линија: нормална, алтернативне и осветљен.

Хајде да пратите код нашег стола:

 <табле целлспацинг="0" целлпаддинг="2" цласс="тбЕленцо">







 <тр>







 <тх> производа </ тх>







 <тх> Кол </ тх>







 <тх> Цена </ тх>







 </ ТР>







 <тр цласс="нормале" онмоусеовер="тхис.цлассНаме='евидензиата'" онмоусеоут="тхис.цлассНаме='нормале'">







 <тд> камере </ тд>







 <тд> 3 </ тд>







 <тд> 100.00 евра </ п>







 </ ТР>







 <тр цласс="алтерната" онмоусеовер="тхис.цлассНаме='евидензиата'" онмоусеоут="тхис.цлассНаме='алтерната'">







 <тд> Мобилни </ п>







 <тд> 2 </ тд>







 <тд> 150,00 евра </ п>







 </ ТР>







 <тр цласс="нормале" онмоусеовер="тхис.цлассНаме='евидензиата'" онмоусеоут="тхис.цлассНаме='нормале'">







 <тд> 20-инчни ЛЦД ТВ </ тд>







 <тд> 1 </ тд>







 <тд> 220.00 евра </ п>







 </ ТР>







 <тр цласс="алтерната" онмоусеовер="тхис.цлассНаме='евидензиата'" онмоусеоут="тхис.цлассНаме='алтерната'">







 <тд> МП3 плејер </ п>







 <тд> 1 </ тд>







 <тд> 60.00 евра </ п>







 </ ТР>







 <тр цласс="нормале" онмоусеовер="тхис.цлассНаме='евидензиата'" онмоусеоут="тхис.цлассНаме='нормале'">







 <тд> ДВД плејер </ п>







 <тд> 1 </ тд>







 <тд> 80.00 евра </ п>







 </ ТР>







 <тр цласс="алтерната" онмоусеовер="тхис.цлассНаме='евидензиата'" онмоусеоут="тхис.цлассНаме='алтерната'">







 <тд> Цонсоле Гамес </ п>







 <тд> 1 </ тд>







 <тд> 200.00 евра </ п>







 </ ТР>







 <тр цласс="нормале" онмоусеовер="тхис.цлассНаме='евидензиата'" онмоусеоут="тхис.цлассНаме='нормале'">







 <тд> ГПС навигатор </ п>







 <тд> 7 </ тд>







 <тд> 140,00 евра </ п>







 </ ТР>







 <тр цласс="нормале" онмоусеовер="тхис.цлассНаме='евидензиата'" онмоусеоут="тхис.цлассНаме='нормале'">







 Мини ДВД камкордери <тд </ п>







 <тд> 1 </ тд>







 <тд> 270.00 евра </ п>







 </ ТР>







 </ Табле>

Као што можете видети то је тривијално ХТМЛ табелу, где смо се трудили да ни доделите различите линије (<тр>) класе "нормално" и "АЦ".

Да се стимулише појава ред на миша линија сарадник елемента (<тр>) онмоусеовер и онмоусеоут догађаја који обезбеђују односно динамички задатак "истакне" класе када летите и вратите се класа почети када се миш напусти ред.