Listor lätt att läsa med alternativ färg och mouseover effekt

I denna artikel kommer vi att se hur man skapar enkla listor som är lättläst för användaren.
För att göra detta kommer vi att använda två enkla åtgärder:

• växlande färger för olika rader i listan,
• Markera den valda raden på mouseover.

Låt oss göra ett exempel och säga att vi kunde visa användaren en lista över produkter som finns i vår e-handelsplats. Nedanför resultatet att vi kommer att uppnå:

Som framgår användning av alternerande färger för olika linjer lättare att läsa de olika posterna i listan, medan närvaron överstrykningspenna på musen gör det ännu mer direkt relevanta för ämnesraden i vårt intresse.

För att göra vår lista har vi använt en enkel HTML-tabell, några instruktioner och lite av CSS DHTML till att stärka den. Men låt oss grader.

Låt oss börja med CSS och se nedan innehållet på vår formatmall:

 table.tbElenco







 {



  



 kant: 1px solid # 808.080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco th







 {



  



 Bakgrund: # 808.080;



  



 color: # FFFFFF;



  



 font-weight: bold;







 }







 table.tbElenco TD







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 Bakgrund: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 Bakgrund: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 Bakgrund: # FFFF00;







 }

Vad vi gjorde är mycket enkel: vi först stiliserat tabellen genom att tilldela en klass som helhet ("tbElenco"), då vi stiliserade och <td> <th> sin helhet, då har vi skapat tre olika klasser motsvarande de tre Status för våra olika linjer: normal, suppleant och lyfts fram.

Låt oss följa koden för vårt 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> Mobil </ td>







 <td> 2 </ td>







 <td> 150,00 Euro </ td>







 </ Tr>







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







 <td> 20-tums 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-spelare </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







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







 <td> DVD-spelare </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







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







 <td> Console Spel </ 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 ni ser är det en trivial HTML-tabell, där vi tog hand tilldela antingen till olika linjer (<tr>) klasser "normala" och "AC".

För att stimulera utseendet på raden på musen linje vi förknippar elementet (<tr>) onMouseOver och onMouseOut händelser som ger respektive dynamisk tilldelning av klassens markera 'när du håller och återgå till klass startar när musen lämnar raden.