Popis jednostavan za čitanje sa alternativni boja i efekt Prelazak mišem

U ovom članku ćemo vidjeti kako stvoriti jednostavan popise koji su lako čitljiv za korisnika.
Za to ćemo koristiti dvije jednostavne mjere:

• izmjenične boje za različite retke popisa;
• Označite odabrani redak u Prelazak mišem.

Učinimo primjer i reći da smo mogli pokazati korisniku popis proizvoda dostupnih u našem e-commerce site. Ispod rezultat da ćemo postići:

Kao što je vidljivo korištenje izmjenične boje za različite linije lakše čitati razne stavke na popisu, dok je prisutnost markera na miša čini još Neposredno mjerodavne za predmet našeg interesa.

Da bi naš popis, koristili smo jednostavne HTML tablice, malo upute i malo CSS DHTML to okrijepiti. Ali neka stupnjeva.

Počnimo s CSS i vidjeti ispod sadržaja našeg style sheet:

 table.tbElenco







 {



  



 granice: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 Boja: # 000000;







 }







 table.tbElenco th







 {



  



 background: # 808080;



  



 Boja: # FFFFFF;



  



 font-weight: bold;







 }







 table.tbElenco td







 {



  



 granice dnu: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 background: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 background: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 background: # FFFF00;







 }

Što smo učinili je vrlo jednostavna: prvo smo stilizirane tablice dodjeljivanjem klase kao cjeline ('tbElenco "), a zatim smo stilizirani i <td> <th> cijelosti, tada smo stvorili tri različite klase odgovaraju tri Status naše različite linije: normalno, alternativni i istaknuto.

Neka je slijediti kod našeg stola:

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







 <tr>







 <th> Proizvod </ th>







 <th> Kol </ th>







 <th> Cijena </ th>







 </ TR>







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







 <td> kamere </ td>







 <td> 3 </ td>







 <td> 100,00 Eura </ td>







 </ TR>







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







 <td> Mobile </ td>







 <td> 2 </ td>







 <td> 150,00 Eura </ td>







 </ TR>







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







 <td> 20-inčni LCD TV </ td>







 <td> 1 </ td>







 <td> 220,00 Eura </ td>







 </ TR>







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







 <td> MP3 player </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ TR>







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







 <td> DVD player </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ TR>







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







 <td> konzole Igre </ td>







 <td> 1 </ td>







 <td> 200,00 Eura </ td>







 </ TR>







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







 <td> GPS navigator </ td>







 <td> 7 </ td>







 <td> 140,00 Eura </ td>







 </ TR>







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







 Mini-DVD Camcorder <td> </ td>







 <td> 1 </ td>







 <td> 270,00 Eura </ td>







 </ TR>







 </ Table>

Kao što možete vidjeti to je trivijalan HTML tablicu, gdje smo se pobrinuli za dodjelu ili na različite linije (<tr>) klase 'normalne' i 'AC'.

Poticati izgled red na liniji miša povezujemo elementa (<tr>) onmouseover i onmouseout događaja koji pružaju, odnosno dinamičan raspored klase "označite" kada hover i vratiti se u klasu početi kada miš ostavlja red.