设计动态交互特效

HTML

<table>
	<caption>IE浏览器发展大事记</caption>
    <tr class="bg_th">
        <th>版本</th>
        <th>发布时间</th>
        <th>绑定系统</th>
    </tr>
    <tr>
        <td>Internet Explorer 1</td>
        <td>1995年8月</td>
        <td>Windows 95 Plus! Pack</td>
    </tr>
    <tr class="bg_even">
        <td>Internet Explorer 2</td>
        <td>1995年11月</td>
        <td>Windows和Mac</td>
    </tr>
    <tr>
        <td>Internet Explorer 3</td>
        <td>1996年8月</td>
        <td>Windows 95 OSR2</td>
    </tr>
    <tr class="bg_even">
        <td>Internet Explorer 4</td>
        <td>1997年9月</td>
        <td>Windows 98</td>
    </tr>
    <tr>
        <td>Internet Explorer 5</td>
        <td>1999年5月</td>
        <td>Windows 98 Second Edition</td>
    </tr>
    <tr class="bg_even">
        <td>Internet Explorer 5.5</td>
        <td>2000年9月</td>
        <td>Windows Millennium Edition</td>
    </tr>
    <tr>
        <td>Internet Explorer 6</td>
        <td>2001年10月</td>
        <td>Windows XP</td>
    </tr>
    <tr class="bg_even">
        <td>Internet Explorer 7</td>
        <td>2006年下半年</td>
        <td>Windows Vista</td>
    </tr>
    <tr>
        <td>Internet Explorer 8</td>
        <td>2009年3 月</td>
        <td>Windows 7</td>
    </tr>
    <tr class="bg_even">
        <td>Internet Explorer 9</td>
        <td>2011年3月</td>
        <td>Windows 7</td>
    </tr>
    <tr>
        <td>Internet Explorer 10</td>
        <td>2013年2月</td>
        <td>Windows 8</td>
    </tr>
</table>
					    

CSS

table { /* 表格默认样式 */
    border: solid 1px #99CCFF;              	/* 表格外框线 */
    border-collapse: collapse;              		/* 合并单元格边框线 */
}
th {/* 标题行样式 */
    background: #0000FF;                   	/* 背景色 */
    color: #fff;                            	/* 字体颜色 */
}
tr:nth-of-type(odd) { background: #99CCFF; }/*奇数行*/
tr:nth-of-type(even) { background: #eee; }/*偶数行*/
tr:hover {/* 鼠标经过时的样式 */
    background:#0000FF;                  	/* 背景色 */
    cursor:pointer;                         	/* 鼠标样式 */
}