Jquery中文網 www.uhadif.co
Jquery中文網 >  CSS教程  >  正文 用CSS和表格代碼實現每行交替顏色的效果比較

用CSS和表格代碼實現每行交替顏色的效果比較

發布時間:2019-11-09   編輯:www.uhadif.co
jquery中文網為您提供用CSS和表格代碼實現每行交替顏色的效果比較等資源,歡迎您收藏本站,我們將為您提供最新的用CSS和表格代碼實現每行交替顏色的效果比較資源
<script>ec(2);</script>

用CSS寫出表格每行交替顏色的效果
關于用CSS定義,來表現出表格每行不同的顏色,用來區分每行數據,方便閱讀。其中有的是利用IE的BUG,在CSS里面添加動態的內容,IE會解析它,這個先不談,因為和主題沒有關系。
還看到幾個很簡單的方法,利用給不同的標簽不同的背景色達到效果,先看這個方法的CSS

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy7835')">復制代碼</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7835>th {font-weight: normal; text-align:left; background: #CCCCCC}
td {background: #FAFAFA}
頁面代碼
<table>
<tr>
<th>第一個顏色</th>
</tr>
<tr>
<td>第二個顏色</td>
</tr>
<tr>
<th>第一個顏色</th>
</tr>
<tr>
<td>第二個顏色</td>
</tr>
<tr>
<th>第一個顏色</th>
</tr>
<tr>
<td>第二個顏色</td>
</tr>
</table>
</td> </tr> </table>

利用td和th,分別給予不同的背景色,來達到效果。但是,每個標簽都有自己特殊的含義,如果用這個方法只是來分割數據,方便查看,那么th就失去它原本的意義,th它代表一列的主題,而在這里它只是為了賦予表格每一行不同的背景色。
web標準化,很重要的一點就是標簽的語義化,這里只是想說這個方法確實比較巧妙,運用起來很簡單,但違背了標準化最基本的東西,如果你不在乎,你完全可以這么用,甚至可以通過驗證。
關于語義化的內容,以后肯定會提到很多,這里只是偶然看到了,然后開個頭。
鼠標經過時改變背景顏色或圖片
可以用于table的td,也可以用在div上,類似IBM的效果
鼠標經過時改變背景顏色

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy8649')">復制代碼</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy8649><table><tr><td width="100" height="100" onmouseover="style.backgroundColor='#C86F70'" onmouseout="style.backgroundColor='#DDC676'" bgcolor="#DDC676">ihandu</td></tr></table>
</td> </tr> </table>

鼠標經過時改變背景圖片

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy8926')">復制代碼</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy8926><table><tr><td width="100" height="100" onMouseOver="this.background='/images/1.gif';" onMouseOut="this.background='/images/2.gif';" background="/images/2.gif">ihandu</td></tr></table>
</td> </tr> </table></td> </tr> </table>

您可能感興趣的文章:
jQuery 行背景顏色的交替顯示(隔行變色)實現代碼
jQuery隔行變色與普通JS寫法的對比
js 隔行變色與鼠標懸停自動變色的實現代碼
表格奇偶行設置不同顏色的核心JS代碼
Javascript 將 rgb 顏色值轉換為 16 進制值的代碼
Javascript 同時提交多個Web表單實現方法
Linux shell中echo改變輸出顯示樣式的方法
jqPlot Option配置對象詳解
jquery入門—數據刪除與隔行變色以及圖片預覽
jquery 交替為表格添加樣式的代碼

[關閉]
北京pk赛车历史 匠心智策 福彩快三网站 东京快乐8预测 黑龙江p62开奖结果查询黑龙江体彩6+1奖池多少钱 德旺配资 吉林快3预测图 贵州快三开奖查询 怎么看股票走势图 炒股软件哪个最好 重庆幸运农场是真的吗 重庆幸运农场一天开多 中国体育彩票app下载安装 十一选五开奖分布图 山西快乐10分走势图25 福建体彩 长荣慧国际