Saraksti viegli nolasīt ar alternatīvu krāsu un mouseover efektu

Šajā rakstā mēs redzēsim, kā izveidot vienkāršus sarakstus, kas ir viegli lasāms lietotājam.
Lai to izdarītu, mēs izmantojam divas vienkārši pasākumi:

• atšķirīgās krāsās tā, lai dažādās rindās šo sarakstu;
• Izcelt izvēlēto rindu uz mouseover.

Veidosim piemērs un pateikt, ka mēs varētu parādīt lietotājam produktu sarakstu pieejami mūsu e-komercijas vietnē. Zemāk rezultātā mēs sasniegsim:

Kā izriet no atšķirīgās krāsās izmantošanai dažādiem maršrutiem vieglāk lasāmus dažādiem ierakstiem sarakstā, bet klātbūtne marķieris uz peles padara to vēl tieši attiektos atbilst mūsu interesēm.

Lai padarītu mūsu sarakstu, mēs, ko izmanto vienkāršu HTML tabulu, dažas instrukcijas un CSS DHTML bit stimulētu to. Bet pieņemsim grādiem.

Sāksim ar CSS un skat. zemāk saturu mūsu stilu lapas:

 table.tbElenco







 {



  



 border: 1px solid # 808.080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco th







 {



  



 background: # 808.080;



  



 color: # FFFFFF;



  



 font-svars: bold;







 }







 table.tbElenco td







 {



  



 robežu apakšā: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 background: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 background: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 background: # FFFF00;







 }

Ko mēs darījām, ir ļoti vienkāršs: vispirms mums ir stilizēts galda, piešķirot klasi kopumā ("tbElenco"), tad mēs stilizēta un <td> <th> kopumā, tad mēs esam izveidojuši trīs dažādas klases, kas atbilst trim Statuss mūsu dažāda: parastais, vietnieks un izcelti.

Pieņemsim sekot kodu mūsu tabulu:

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







 <tr>







 <th> Preces </ th>







 <th> Daudz </ th>







 <th> Cena </ 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 collu 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 atskaņotāji </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







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







 <td> DVD atskaņotājs </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







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







 <td> konsoles spēles </ 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>

Kā jūs varat redzēt, tas ir triviāla HTML tabulu, kur mēs ņēmām aprūpi, lai piešķirtu vai nu uz ​​dažādām pozīcijām (<tr>) klases "normāls" un "AC".

Lai stimulētu izskatu rindas uz peles line mēs saistām elementu (<tr>) onMouseOver un onmouseout notikumus, kas, attiecīgi, dinamisku piešķiršanu klases "izcelt", ja jūs lidināties un atgriezties klases sākums, kad pele pamet rindu.