รายการง่ายต่อการอ่านที่มีสีอื่นและผลกระทบที่โพสต์

ในบทความนี้เราจะเห็นวิธีการสร้างรายการแบบง่ายๆที่สามารถอ่านได้อย่างง่ายดายสำหรับผู้ใช้
การทำเช่นนี้เราจะใช้ทั้งสองมาตรการง่ายๆ

• สีสลับสำหรับแถวที่แตกต่างกันของรายการ;
• จุดเด่นแถวที่เลือกที่โพสต์

ขอให้เป็นตัวอย่างและบอกว่าเราสามารถแสดงให้ผู้ใช้รายการของผลิตภัณฑ์ที่สามารถใช้ได้ในเว็บไซต์พาณิชย์อิเล็กทรอนิกส์ของเรา ด้านล่างผลที่ว่าเราจะบรรลุ :

ในฐานะที่เป็นการใช้ที่เห็นได้ชัดของสีสลับกันสำหรับสายที่แตกต่างกันให้อ่านง่ายขึ้นรายการต่างๆที่อยู่ในรายการในขณะที่เน้นการแสดงตนบนเมาส์ทำให้ยิ่งทันทีที่เกี่ยวข้องกับบรรทัดเรื่องของดอกเบี้ยของเราคือ

ที่จะทำให้รายการของเราเราใช้ตาราง HTML ง่ายๆไม่กี่คำแนะนำและบิตของ CSS DHTML เพื่อเสริมกำลังมัน แต่องศาให้

เริ่มต้นให้กับ CSS และเนื้อหาดูด้านล่างของแผ่นลักษณะของเรา :

 table.tbElenco







 {



  



 border : 1px solid # 808080;



  



 font - family : Verdana, Arial, Tahoma;



  



 font - size : 10px;



  



 สี : # 000000;







 }







 th table.tbElenco







 {



  



 background : # 808080;



  



 สี : # FFFFFF;



  



 font - น้ำหนัก : หนา;







 }







 TD table.tbElenco







 {



  



 ขอบล่าง : 1px solid # CCCCCC;







 }







 tr.normale table.tbElenco







 {



  



 พื้นหลัง : # FFFFFF;







 }







 tr.alternata table.tbElenco







 {



  



 background : # EEEEEE;







 }







 tr.evidenziata table.tbElenco







 {



  



 พื้นหลัง : # FFFF00;







 }

สิ่งที่เราทำง่ายมาก : แรกที่เราสุกใสตารางโดยการกำหนดชั้นเรียนเป็นทั้ง ('tbElenco') แล้วเราสุกใสและ <td> <th> อย่างครบถ้วนแล้วเราได้สร้างสามชั้นเรียนแตกต่างกันตรงที่สาม สถานะของสายที่แตกต่างกันของเรา : ปกติ, อื่น ๆ และเน้น

Let's ตามรหัสของตารางของเรา :

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







 <tr>







 สินค้า <th> </ th>







 จำนวน <th> </ th>







 ราคา <th> </ th>







 </ TR>







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







 <td> กล้อง </ p>







 <td> 3 </ p>







 <td> 100.00 ยูโร </ p>







 </ TR>







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







 <td> มือถือ </ font>







 <td> 2 </ p>







 <td> 150.00 ยูโร </ p>







 </ TR>







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







 <td> 20 นิ้วแอลซีดีทีวี </ font>







 <td> 1 </ p>







 <td> 220.00 ยูโร </ p>







 </ TR>







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







 <td> MP3 Player </ font>







 <td> 1 </ p>







 <td> 60.00 ยูโร </ p>







 </ TR>







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







 <td> เครื่องเล่นดีวีดี </ font>







 <td> 1 </ p>







 <td> 80.00 ยูโร </ p>







 </ TR>







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







 <td> เกมคอนโซล </ font>







 <td> 1 </ p>







 <td> 200.00 ยูโร </ p>







 </ TR>







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







 <td> GPS Navigator </ p>







 <td> 7 </ font>







 <td> 140.00 ยูโร </ p>







 </ TR>







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







 Mini - DVD Camcorder <td> </ font>







 <td> 1 </ p>







 <td> 270.00 ยูโร </ p>







 </ TR>







 </ table>

ที่คุณสามารถเห็นมันเป็นตาราง HTML เล็กน้อยซึ่งเราก็ดูแลในการกำหนดทั้งในสายที่แตกต่างคลาส (<tr>)'ปกติ'และ'AC'

เพื่อกระตุ้นให้เกิดลักษณะของแถวในสายเมาส์ที่เราเชื่อมโยงองค์ประกอบเหตุการณ์ onmouseover (<tr>) และ MV โดนที่ให้ตามลำดับการกำหนดแบบไดนามิกของ'เน้น'ในชั้นเรียนเมื่อคุณเลื่อนและกลับไปที่ชั้น เริ่มต้นเมื่อเมาส์ใบแถว