Liste de uşor de citit, cu o altă culoare şi a intrării în vigoare mouseover

În acest articol vom vedea cum pentru a crea liste simple care sunt uşor de citit pentru utilizator.
Pentru a face acest lucru, vom folosi două măsuri simple:

• alternând culorile pentru rânduri diferite ale listei;
• Evidenţiaţi rândul selectat la mouseover.

Să facem un exemplu şi să spună am putea arată ghidul de o listă a produselor disponibile în noastre de e-commerce site-ului. Mai jos de rezultatul pe care le va realiza:

După cum este evident utilizarea de culori alternative pentru diferite linii mai uşor de citit intrările diferite în listă, în timp ce evidenţiere prezenţa pe mouse-ul îl face şi mai imediat relevante pentru linia de subiect de interes noastre.

Pentru a face lista noastră, am folosit un tabel simplu HTML, un set de instrucţiuni şi un pic de CSS DHTML să-l înviora. Dar haideţi să grade.

Să începem cu CSS şi se vedea mai jos conţinutul foaie de stil noastre:

 table.tbElenco







 {



  



 frontieră: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco-lea







 {



  



 background: # 808080;



  



 color: # FFFFFF;



  



 font-Greutate: bold;







 }







 table.tbElenco td







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 fundal: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 background: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 background: # FFFF00;







 }

Ceea ce am făcut este foarte simplu: în primul rând am stilizat tabel prin atribuirea unei clase ca un întreg ("tbElenco '), apoi am stilizate şi <td> <th> toate elementele sale, apoi ne-am creat trei clase diferite care corespund celor trei Statutul de liniile noastre de diferite: normal, alternative şi a subliniat.

Să urmaţi codul de masa noastră:

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







 <tr>







 <th> Produs </ th>







 Cantitate <th> </ th>







 <th> Pret </ th>







 </ Tr>







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







 <td> Camera </ 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-inch 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 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> Jocuri pe console </ 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 Camera video <td> </ td>







 <td> 1 </ td>







 <td> 270.00 Euro </ td>







 </ Tr>







 </ Table>

După cum puteţi vedea, este un tabel de trivial HTML, unde am avut grijă să fie alocaţi la liniile diferite (<tr>) clasele de "normal" şi "AC".

Pentru a stimula apariţia rând pe linia mouse-ul pe care le asociem evenimente element (<tr>) onmouseover şi onMouseOut care oferă, respectiv, alocarea dinamica a "sublinia" clasei atunci când treceţi şi a reveni la clasa începe atunci când mouse-ul iese din rând.