列出容易阅读与替代颜色和鼠标悬停效果

在这篇文章中，我们将看到如何创建易于为用户可读的简单列表 。
要做到这一点，我们将使用两个简单的措施：

• 对不同行的名单交替的颜色;
• 突出显示鼠标悬停在选定的行。

让我们举例说，我们可以显示用户的产品在我们的电子商务网站的名单。 下面的结果，我们将实现：

由于是明显的不同颜色的线条交替使用易于阅读列表中的各个项目，而对小鼠存在荧光笔，那就更直接关系到我们的利益的主题行。

为了使我们的名单中，我们用一个简单的HTML表格，几个说明和DHTML的CSS位搞活了。 但是让我们度。

让我们先从下面的CSS，看到了我们的样式表的内容：

 table.tbElenco







 {



  



边界：1px的固体＃808080;



  



字体家庭：宋体，宋体，宋体;



  



字体大小：10px;



  



颜色：＃000000;







 }







 table.tbElenco日







 {



  



背景：＃808080;



  



颜色：＃FFFFFF;



  



字体重量：大胆;







 }







 table.tbElenco TD







 {



  



边境底：1px的固体＃CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



背景：＃FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



背景：＃EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



背景：＃FFFF00;







 }

我们所做的其实很简单：首先我们通过程式化的分配作为一个整体（“tbElenco'）类，那么我们的程式化和 <td> <TH>整表，然后我们创建了三个对应于三个不同的类我们的不同线路状态：正常，备用和突出。

让我们按照我们的表的代码：

 <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>相机</ TD>







 <TD> 3 </ TD>







 <TD> 100.00欧元</ TD>







 </ TR>







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







 <TD>移动</ TD>







 <TD> 2 </ TD>







 <TD> 150.00欧元</ TD>







 </ TR>







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







 <TD> 20英寸液晶电视</ TD>







 <TD> 1 </ TD>







 <TD> 220.00欧元</ TD>







 </ TR>







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







 <TD> MP3播放器</ TD>







 <TD> 1 </ TD>







 <TD> 60.00欧元</ TD>







 </ TR>







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







 <TD> DVD播放机</ TD>







 <TD> 1 </ TD>







 <TD> 80.00欧元</ TD>







 </ TR>







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







 <TD>控制台游戏</ TD>







 <TD> 1 </ TD>







 <TD> 200.00欧元</ TD>







 </ TR>







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







 <TD> GPS导航仪</ TD>







 <TD> 7 </ TD>







 <TD> 140.00欧元</ TD>







 </ TR>







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







迷你DVD摄像机<TD> </ TD>







 <TD> 1 </ TD>







 <TD> 270.00欧元</ TD>







 </ TR>







 </ TABLE>

正如你可以看到它是一个简单的HTML表格，在这里我们把注意分配无论对（<TR>）班的“正常”和“交流”不同的线路。

为了刺激对小鼠行的行的外观我们联系的元素（<TR>）onmouseover和onmouseout事件分别提供了类“突出”动态分配时，悬停，并返回类开始时，鼠标离开该行。