Lister, let at læse med en anden farve og mouseover effekt

I denne artikel vil vi se, hvordan man laver simple lister, der er let læselige for brugeren.
For at gøre dette vil vi bruge to simple forholdsregler:

• vekslende farver til forskellige rækker af listen;
• Fremhæv den valgte række på mouseover.

Lad os lave et eksempel og sige, at vi kunne vise brugeren en liste over produkter, som findes i vores e-handel site. Nedenfor det resultat, at vi vil opnå:

Som det fremgår brugen af ​​skiftende farver til forskellige linjer nemmere at læse de forskellige poster på listen, mens tilstedeværelsen fremhæverpen på musen gør det endnu mere umiddelbart relevante for emnelinjen i vores interesse.

For at gøre vores liste, vi brugte en simpel HTML-tabel, et par anvisninger og en smule af CSS DHTML til at puste nyt liv i det. Men lad os grader.

Lad os starte med CSS og se nedenfor indholdet af vores stylesheet:

 table.tbElenco







 {



  



 kant: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco th







 {



  



 background: # 808080;



  



 color: # FFFFFF;



  



 font-weight: fed;







 }







 table.tbElenco TD







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 background: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 Baggrunden: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 Baggrunden: # FFFF00;







 }

Hvad gjorde vi er meget enkel: Først skal vi stiliserede bordet ved at tildele en klasse som helhed ("tbElenco '), så vi stiliseret og <td> <th> sin helhed, så har vi lavet tre forskellige klasser svarende til de tre Status for vores forskellige linjer: normal, suppleant og fremhævet.

Lad os følge den kodeks for vores bord:

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







 <tr>







 <th> produkt </ th>







 <th> Antal </ th>







 <th> Pris </ th>







 </ Tr>







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







 <td> Kamera </ td>







 <td> 3 </ td>







 <td> 100,00 Euro </ td>







 </ Tr>







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







 <td> Mobile </ td>







 <td> 2 </ td>







 <td> 150,00 Euro </ td>







 </ Tr>







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







 <td> 20-tommers LCD-TV </ td>







 <td> 1 </ td>







 <td> 220,00 Euro </ td>







 </ Tr>







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







 <td> MP3-afspiller </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







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







 <td> DVD-afspiller </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







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







 <td> Console spil </ td>







 <td> 1 </ td>







 <td> 200,00 Euro </ td>







 </ Tr>







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







 <td> GPS Navigator </ td>







 <td> 7 </ td>







 <td> 140,00 Euro </ td>







 </ Tr>







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







 Mini-DVD-videokamera <td> </ td>







 <td> 1 </ td>







 <td> 270,00 Euro </ td>







 </ Tr>







 </ Table>

Som du kan se det er en triviel HTML-tabel, hvor vi sørgede for at tildele enten til de forskellige linjer (<tr>) klasserne 'normale' og 'AC'.

For at stimulere fremkomsten af den række på musen linje, vi forbinder elementet (<tr>) onmouseover og onmouseout begivenheder, som giver henholdsvis den dynamiske tildeling af klassens fremhæve ', når du hover og vende tilbage til klassen starter når musen forlader rækken.