Heim > Backend-Entwicklung > PHP-Tutorial > 前端大神 和tp大神来看看 如何让循环里的结果每次颜色不一样

前端大神 和tp大神来看看 如何让循环里的结果每次颜色不一样

WBOY
Freigeben: 2016-07-06 13:52:44
Original
1030 Leute haben es durchsucht

下面的volist 中的循环 如何让每次循环的结果 背景颜色都不一样 呢
如下图的效果
.acti{
width: 100%;
height: 70px;
//border: 1px dashed #7E54DC;
background-color: #E7E7E7;
margin-bottom: 5px;
font-size: 12px;
}

<code>            

            <a href="__APP__/Activity/near_acti_content/ac_id/<%7B%24vo.ac_id%7D>"><div class="acti">
                 <div style="margin-top: 2px;">
<i class="fa fa-book fa-fw"></i>  <span style="float: right;"><i class="fa fa-cny fa-fw"></i>元</span>
</div>
                 <div style="margin-top: 5px;">
<i class="fa fa-map-marker fa-fw"></i>   </div>
                 <div style="margin-top: 6px;">
<i class="fa fa-clock-o fa-fw"></i> </div>
            </div>
           </a>

           
           </code>
Nach dem Login kopieren
Nach dem Login kopieren

前端大神 和tp大神来看看 如何让循环里的结果每次颜色不一样

回复内容:

下面的volist 中的循环 如何让每次循环的结果 背景颜色都不一样 呢
如下图的效果
.acti{
width: 100%;
height: 70px;
//border: 1px dashed #7E54DC;
background-color: #E7E7E7;
margin-bottom: 5px;
font-size: 12px;
}

<code>            

            <a href="__APP__/Activity/near_acti_content/ac_id/<%7B%24vo.ac_id%7D>"><div class="acti">
                 <div style="margin-top: 2px;">
<i class="fa fa-book fa-fw"></i>  <span style="float: right;"><i class="fa fa-cny fa-fw"></i>元</span>
</div>
                 <div style="margin-top: 5px;">
<i class="fa fa-map-marker fa-fw"></i>   </div>
                 <div style="margin-top: 6px;">
<i class="fa fa-clock-o fa-fw"></i> </div>
            </div>
           </a>

           
           </code>
Nach dem Login kopieren
Nach dem Login kopieren

前端大神 和tp大神来看看 如何让循环里的结果每次颜色不一样

1.通过循环中的索引添加不同的 class,如 c1, c2 ...在样式中定义这些类的样式。
2.使用css选择器 selector:nth-child(n),为某个子元素添加样式。n 可以具体的第 n 个,从 1 开始。也可以是表达式比如 :nth-child(2n) 偶数项、:nth-child(2n+1) 奇数项。

设置好对应的背景色的class属性。然后根绝循环的索引值取不同的class属性

<code>.bg0{}
.bg1{}
.bg1{}</code>
Nach dem Login kopieren

循环时以索引值取

<code>{foreach $key $val}
<div class="bg{key}">...</div>
{/foreach}</code>
Nach dem Login kopieren

试试看,希望对你有帮助

<code class="js">function getRandomColor() {
    var strColor = '#';
    for (var i = 0; i </code>
Nach dem Login kopieren

呵呵呵,用js实现一个全随机的。

你在做webapp吗

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage