Sąrašai lengva skaityti su pakaitinių spalvos ir mouseover poveikį

Šiame straipsnyje mes matome, kaip sukurti paprastą sąrašus, kurie yra lengvai įskaitomas vartotojui.
Norėdami tai padaryti, mes naudosime dviejų paprastų priemonių:

• kintamos spalvos skiriasi eilučių sąrašą;
• Pažymėkite pasirinktą eilutę apie mouseover.

Kurkime pavyzdžiu ir pasakyti mes galėtume parodyti vartotojo turimų produktų mūsų e-komercijos svetainė, sąrašas. Žemiau rezultatas, kad mes pasieksime:

Kaip matyti kintamosios dažiklių naudojimą skirtingomis kryptimis būtų lengviau skaityti įvairius įrašų sąraše, o buvimas Žymeklis ant pelės verčia dar labiau tiesiogiai susiję su tema mūsų interesus.

Norėdami, kad mūsų sąraše, mes panaudojome paprastą HTML lentelės, keletas instrukcijų ir CSS DHTML šiek tiek pagyvinti jį. Bet tegul laipsnių.

Pradėkime su CSS ir žr. žemiau mūsų stilių kiekis:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 spalva: # 000000;







 }







 table.tbElenco d.







 {



  



 background: # 808080;



  



 spalva: # 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;







 }

Ką mes padarėme labai paprasta: pirmiausia mes stilizuotas paskiriant kaip visumą ("tbElenco") klasei, tai mes stilizuotai ir <td> <th> visas lentelės, tada mes sukūrėme tris skirtingas klases, atitinkančias tris Statusas mūsų skirtingų linijų: normalus, pakaitinių ir paryškinti.

Leiskite sekti mūsų stalas Kodas:

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







 <tr>







 <th> Produkto </ th>







 <th> Kiekis </ th>







 <th> Kaina </ TH>







 </ Tr>







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







 <td> Fotoaparato </ td>







 <td> 3 </ td>







 <td> 100,00 Euro </ td>







 </ Tr>







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







 <td> Mobilieji </ td>







 <td> 2 </ td>







 <td> 150,00 Euro </ td>







 </ Tr>







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







 <td> 20 colių LCD televizorius </ td>







 <td> 1 </ td>







 <td> 220,00 Euro </ td>







 </ Tr>







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







 <td> MP3 grotuvas </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







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







 <td> DVD grotuvas </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







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







 <td> konsolės Žaidimai </ td>







 <td> 1 </ td>







 <td> 200,00 Euro </ td>







 </ Tr>







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







 <td> GPS navigatorius </ td>







 <td> 7 </ td>







 <td> 140,00 Euro </ td>







 </ Tr>







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







 Mini-DVD kameros <td> </ td>







 <td> 1 </ td>







 <td> 270,00 Euro </ td>







 </ Tr>







 </ Table>

Kaip matote ji yra trivialus HTML lentelės, kur mes rūpinosi priskirti arba prie įvairių linijų (<tr>) klases "normalus" ir "AC".

Skatinti eilutės išvaizdą pelės linijos mes siejame elementas (<tr>) onmouseover ir onmouseout įvykių, kurie pateikti atitinkamai dinamiškos priskyrimo klasės "pabrėžti", kai užveskite pelės žymeklį ir grįžti į klasę pradėti, kai pelės lapų eilės.