> 백엔드 개발 > PHP 튜토리얼 > 前端大神 和tp大神来看看 如何让循环里的结果每次颜色不一样

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

WBOY
풀어 주다: 2016-07-06 13:52:44
원래의
1030명이 탐색했습니다.

下面的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>
로그인 후 복사
로그인 후 복사

前端大神 和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>
로그인 후 복사
로그인 후 복사

前端大神 和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>
로그인 후 복사

循环时以索引值取

<code>{foreach $key $val}
<div class="bg{key}">...</div>
{/foreach}</code>
로그인 후 복사

试试看,希望对你有帮助

<code class="js">function getRandomColor() {
    var strColor = '#';
    for (var i = 0; i </code>
로그인 후 복사

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

你在做webapp吗

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿