CSS2實(shí)現(xiàn)的隔行換色
更新時(shí)間：2007年05月29日 00:00:00 作者：
利用了CSS2 的 相鄰選擇符 IE7以下不支持
隔行換色示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>放棄class與js實(shí)現(xiàn)隔行換色效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PengRong" />
<style type="text/css">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
tr {background:#eee;}
tr + tr {background:#ccc;}
tr + tr + tr {background:#eee;}
tr + tr + tr + tr {background:#ccc;}
tr + tr + tr + tr + tr {background:#eee;}
-->
</style>
</head>
<body>
<table>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
</table>
</body>
</html>
隔列換色示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>放棄class與js實(shí)現(xiàn)隔列換色效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PengRong" />
<style type="text/css">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
td {background:#eee;}
td + td {background:#ccc;}
td + td + td {background:#eee;}
td + td + td + td {background:#ccc;}
td + td + td + td + td {background:#eee;}
-->
</style>
</head>
<body>
<table>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
</table>
</body>
</html>
隔行換色示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>放棄class與js實(shí)現(xiàn)隔行換色效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PengRong" />
<style type="text/css">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
tr {background:#eee;}
tr + tr {background:#ccc;}
tr + tr + tr {background:#eee;}
tr + tr + tr + tr {background:#ccc;}
tr + tr + tr + tr + tr {background:#eee;}
-->
</style>
</head>
<body>
<table>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
</table>
</body>
</html>
隔列換色示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>放棄class與js實(shí)現(xiàn)隔列換色效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PengRong" />
<style type="text/css">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
td {background:#eee;}
td + td {background:#ccc;}
td + td + td {background:#eee;}
td + td + td + td {background:#ccc;}
td + td + td + td + td {background:#eee;}
-->
</style>
</head>
<body>
<table>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
<tr>
<td>12</td><td>12</td><td>12</td><td>12</td>
</tr>
</table>
</body>
</html>
您可能感興趣的文章:
- 表格隔行換色 css expression
- 不用javascript實(shí)現(xiàn)帶序號(hào)的表格隔行換色的效果
- li隔行換色改進(jìn)版
- jQuery 隔行換色 支持鍵盤(pán)上下鍵，按Enter選定值
- 表格 隔行換色升級(jí)版
- Js 實(shí)現(xiàn)表格隔行換色一例
- javascript 隔行換色函數(shù)代碼
- 基于Jquery的表格隔行換色，移動(dòng)換色，點(diǎn)擊換色插件
- jQuery方法簡(jiǎn)潔實(shí)現(xiàn)隔行換色及toggleClass的使用
- 使用jquery hover事件實(shí)現(xiàn)表格的隔行換色功能示例
- 原生javascript實(shí)現(xiàn)隔行換色
相關(guān)文章
css條件注釋理論及實(shí)踐源文件...2007-03-03
使用CSS解決文字環(huán)繞圖片問(wèn)題的代碼...2007-12-12
超贊的隨機(jī)顏色搭配工具...2007-05-05
我們?cè)谧霰韱蔚那闆r下，input、textarea、button的樣式比較容易定義，select和input file的樣式難以定義。2008-11-11
主要用于不能輸入中文的情況下，使用，這樣就不要用js2008-06-06
最近對(duì)H1的討論很多（在文章內(nèi)容頁(yè)中），大致有以下兩種情況： H1應(yīng)該用于文章的標(biāo)題上 H1應(yīng)該用于站點(diǎn)的標(biāo)題上2008-04-04
學(xué)習(xí)標(biāo)準(zhǔn)——筆記...2007-02-02
用CSS floats創(chuàng)建三欄頁(yè)布局
用CSS floats創(chuàng)建三欄頁(yè)布局...2007-02-02
如果給div元素設(shè)置了寬度時(shí)，比如width:100%，此時(shí)div在IE中（IE6，IE7）將占據(jù)物理空間，而在FF中不占據(jù)物理空間（正確理解）。為了表述直觀，將樣式直接寫(xiě)在元素標(biāo)簽內(nèi)：2008-03-03
3個(gè)效果超酷的FORM表單美化效果 打包下載...2007-09-09