網(wǎng)頁設計制作CSS實現(xiàn)隔行換色兩種方法
互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:28:20 作者：佚名 
我要評論
我要評論網(wǎng)頁設計制作,CSS實現(xiàn)隔行換色兩種方法:
第一種方法:
以下為引用的內(nèi)容：
<style type="text/css">
UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
}
</style>
&
網(wǎng)頁設計制作,CSS實現(xiàn)隔行換色兩種方法:
第一種方法:
以下為引用的內(nèi)容：
<style type="text/css">
UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
}
</style>
<ul class="myul1">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li2">333</li>
<li id="li2">444</li>
<li id="li2">555</li>
<li id="li2">666</li>
</ul>
第二種方法:
以下為引用的內(nèi)容：
<style type="text/css">
<!--
.li01 { background:#FFF; }
.li02 { background:#000; }
li a{width:100%;display:block;}
li a:hover{background:red;}
-->
</style>
<div id="list01"><ul>
<li class="title"><a href="#">title</a></li>
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
</ul></div>
<script Language="Javascript1.2">
objName=document.getElementById("list01").getElementsByTagName("li")
for (i=0;i<objName.length;i ) {
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
</script>
相關文章
- 想必大家對隔行變換色的概念都不陌生了吧，其實css3也是可以實現(xiàn)的，下面為大家詳細介紹下2014-02-19
- 常見的CSS表格樣式有圓角、隔行、變色等等，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-30
- 單一的表格很容易使人感到枯燥，使用變色效果可以使得表格看起來更加舒適，在本文將為大家介紹下使用css實現(xiàn)隔行變色顯示，感興趣的朋友可以參考下2013-10-05
- CSS expression 隔行換色效果實現(xiàn)代碼，需要的朋友可以參考下。2009-12-13
CSS實現(xiàn)網(wǎng)頁中的隔行換色代碼-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
以前在Dreamweaver中用表格布局網(wǎng)頁的時候常常用到一種設計手法--隔行換色。也就是新聞列表或是列表類的每隔一行就換另一個色彩這樣顯得很漂亮也很合適閱讀。所以這種2008-10-17CSS網(wǎng)頁隔行換色技巧-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
CSS隔行換色的問題，其實很簡單，您可以根據(jù)您的需要，采用下面的任何一種方法，當然，要適合你的編碼與需求情況： 一、background背景圖片 如果行高固定的話，推2008-10-17
這篇文章主要介紹了HTML n種方式實現(xiàn)隔行變色的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2020-06-17