Luettelot helppolukuinen vaihtoehtoisella värillä ja mouseover vaikutus

Tässä artikkelissa näemme kuinka luoda yksinkertaisia ​​luetteloita, jotka ovat helposti luettavissa käyttäjälle.
Siksi meidän tulee käyttää kahta yksinkertaista toimenpidettä:

• vuorottelevat värit eri riveille luettelon;
• Korosta valittu rivi hiiri viedään sen päälle.

Sanotaan heti esimerkki ja voisi näyttää meidän käyttäjän luettelo tuotteista saatavana myös e-commerce sivusto. Alla tulos, että saavutamme:

Kuten on ilmeistä käyttö vuorotellen värejä eri linjojen helpompi lukea eri nimikkeisiin luettelossa, kun läsnäolo korostustyökalu hiiren tekee siitä vieläkin välitöntä merkitystä aiherivin kiinnostuksemme.

Jotta meidän lista, käytimme yksinkertaista HTML-taulukon, muutamia ohjeita ja hieman CSS DHTML elävöittämään sitä. Mutta katsotaanpa astetta.

Aloitetaan CSS ja katso alla sisältöä meidän tyylisivun:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco th







 {



  



 background: # 808080;



  



 color: # FFFFFF;



  



 font-weight: bold;







 }







 table.tbElenco td







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 background: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 background: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 background: # FFFF00;







 }

Mitä teimme hyvin yksinkertainen: ensin meidän tyylitelty taulukko määrittämällä luokka kokonaisuutena ("tbElenco"), sitten me tyylitelty ja <td> <th> kokonaisuudessaan, niin meillä on luonut kolme luokkaa vastaavat kolmea Tila meidän eri linjojen: normaali, varajäsen ja korostettuna.

Katsotaanpa noudattaa käytännesääntöjä meidän taulukossa:

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







 <tr>







 <th> Tuote </ th>







 <th> Määrä </ th>







 <th> Hinta </ ​​th>







 </ TR>







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







 <td> Camera </ td>







 <td> 3 </ td>







 <td> 100,00 euroa </ td>







 </ TR>







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







 <td> Mobile </ td>







 <td> 2 </ td>







 <td> 150,00 euroa </ td>







 </ TR>







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







 <td> 20-tuumainen LCD-televisio </ td>







 <td> 1 </ td>







 <td> 220,00 euroa </ td>







 </ TR>







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







 <td> MP3-soitin </ td>







 <td> 1 </ td>







 <td> 60.00 euroa </ td>







 </ TR>







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







 <td> DVD-soitin </ td>







 <td> 1 </ td>







 <td> 80,00 euroa </ td>







 </ TR>







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







 <td> Konsolipelit </ td>







 <td> 1 </ td>







 <td> 200,00 euroa </ td>







 </ TR>







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







 <td> GPS Navigator </ td>







 <td> 7 </ td>







 <td> 140,00 euroa </ td>







 </ TR>







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







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







 <td> 1 </ td>







 <td> 270,00 euroa </ td>







 </ TR>







 </ Table>

Kuten näette se on triviaali HTML-taulukon, jossa otimme huolellisesti määrittää joko eri linjojen (<tr>) luokkiin "normaali" ja "AC".

Edistää ulkonäkö krs hiiren line liitämme elementti (<tr>) onmouseover ja onmouseout tapahtumia, jotka tarjoavat vastaavasti dynaaminen toimeksiannosta luokan "korosta", kun viet ja palata luokan alkaa, kun hiiren lähtee rivi.