前端大神 和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>
回复内容:
下面的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>
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>
试试看,希望对你有帮助
function getRandomColor() { var strColor = '#'; for (var i = 0; i < 6; i++) { var currnet = Math.random() * 15 | 0; strColor += currnet.toString(16); } return strColor; } $(".acti").css('background-color',getRandomColor());
呵呵呵,用js实现一个全随机的。
你在做webapp吗

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

PHP主要是过程式编程,但也支持面向对象编程(OOP);Python支持多种范式,包括OOP、函数式和过程式编程。PHP适合web开发,Python适用于多种应用,如数据分析和机器学习。

PHP在数据库操作和服务器端逻辑处理中使用MySQLi和PDO扩展进行数据库交互,并通过会话管理等功能处理服务器端逻辑。1)使用MySQLi或PDO连接数据库,执行SQL查询。2)通过会话管理等功能处理HTTP请求和用户状态。3)使用事务确保数据库操作的原子性。4)防止SQL注入,使用异常处理和关闭连接来调试。5)通过索引和缓存优化性能,编写可读性高的代码并进行错误处理。

PHP用于构建动态网站,其核心功能包括:1.生成动态内容,通过与数据库对接实时生成网页;2.处理用户交互和表单提交,验证输入并响应操作;3.管理会话和用户认证,提供个性化体验;4.优化性能和遵循最佳实践,提升网站效率和安全性。

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

PHP适合网页开发和快速原型开发,Python适用于数据科学和机器学习。1.PHP用于动态网页开发,语法简单,适合快速开发。2.Python语法简洁,适用于多领域,库生态系统强大。

PHP起源于1994年,由RasmusLerdorf开发,最初用于跟踪网站访问者,逐渐演变为服务器端脚本语言,广泛应用于网页开发。Python由GuidovanRossum于1980年代末开发,1991年首次发布,强调代码可读性和简洁性,适用于科学计算、数据分析等领域。

PHP的核心优势包括易于学习、强大的web开发支持、丰富的库和框架、高性能和可扩展性、跨平台兼容性以及成本效益高。1)易于学习和使用,适合初学者;2)与web服务器集成好,支持多种数据库;3)拥有如Laravel等强大框架;4)通过优化可实现高性能;5)支持多种操作系统;6)开源,降低开发成本。

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip
