cycle标签和random两种方式美化表格
一:cycle标签实现给表格变色
1. <style>标签里写好需要的颜色
2. 在要变色的地方(行/列)加固定的语句,按照顺序依次执行
代码:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img{
width: 20px;
height: 20px;
}
.red{
color:red;
}
.yellow{
color: yellow;
}
.green{
color:green;
}
</style>
</head>
<body>
<table border="1px">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机号</td>
<td>爱好</td>
<td>图片</td>
</tr>
{% for i in user %}
<tr class="{% cycle 'red' 'yellow' 'green' %}">
<td>{{i.name}}</td>
<td>{{i.gender}}</td>
<td>{{i.age}}</td>
<td>{{i.mobile}}</td>
<td>{{i.hobby}}</td>
<td><img src="{% static i.pic_url %}"</td>
</tr>
{% endfor %}
</table> </body>
</html>
二:用random过滤器随机变色
1.<style>标签里写好需要的颜色
2.在后端接口把颜色加入列表
3.颜色列表名加random过滤器在定义颜色中随机变换,不可将列表直接写到random前面,否则会导致random无法正确识别而报错
def red(request):
user = models.User.objects.all()
change_color = ['red','yellow','green']
return render(request,'helloapp/red.html',locals())
cycle标签和random两种方式美化表格的更多相关文章
- C# 如何通过mailto标签和SMTP协议两种方式发送邮件
本文主要讲解如何通过如现mailto标签和SMTP协议两种方式发送邮件,下面就直入主题 方法一.通过mailto标签发送邮件 通过mailto不是正真意义上的发送邮件,它只是会自动调用我们本地默认的邮 ...
- Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
- 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入
在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...
- placeholder实现的两种方式
/** * PlaceHolder组件 * $(input).placeholder({ * word: // @string 提示文本 * color: // @string 文本颜色 * evtT ...
- java中实现同步的两种方式:syschronized和lock的区别和联系
Lock是java.util.concurrent.locks包下的接口,Lock 实现提供了比使用synchronized 方法和语句可获得的更广泛的锁定操作,它能以更优雅的方式处理线程同步问题,我 ...
- spring配置属性的两种方式
spring配置属性有两种方式,第一种方式通过context命名空间中的property-placeholder标签 <context:property-placeholder location ...
- Code First02---CodeFirst配置实体与数据库映射的两种方式
Code First有两种配置数据库映射的方式,一种是使用数据属性DataAnnotation,另一种是Fluent API. 这两种方式分别是什么呢?下面进行一一解释: DataAnnotation ...
- 将html页改成jsp的两种方式
将html页改成jsp的两种方式 作者: 字体:[增加 减小] 类型:转载 时间:2013-08-13 将html页改成jsp有两种方法,第一种是直接修改html文件,另一种是新建jsp文件.下面为大 ...
- Android Studio签名打包的两种方式
签名打包的两种方式: 注:给我们自己开发的app签名,就代表着我自己的版权,以后要进行升级,也必须要使用相同的签名才行.签名就代表着自己的身份(即keystore),多个app可以使用同一个签名. 如 ...
随机推荐
- docker 安装mongo
1.docker安装参考docker官网教程 2.docker中获取mongo镜像 sudo pull mongo 3.通过run命令新建/启动容器,容器名称为mongo,本地宿主机如果27017端口 ...
- python 爬虫与数据可视化--python基础知识
摘要:偶然机会接触到python语音,感觉语法简单.功能强大,刚好朋友分享了一个网课<python 爬虫与数据可视化>,于是在工作与闲暇时间学习起来,并做如下课程笔记整理,整体大概分为4个 ...
- ISP PIPLINE (三) BPC
what is the Bad Pixel? 坏点为死点,也就是基本不随照度变化呈现光电线性转换的关系.表现为暗态常亮,亮态常暗. 坏点分类:静态坏点:亮坏点,暗坏点. ...
- 69. x 的平方根
问题描述 实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: 4 输出: ...
- css margin使用技巧
margin使用技巧: (1)设置元素水平居中:margin:x auto; (2)margin负值让元素位移及边框合并 水平居中:auto 代码: <!DOCTYPE html> < ...
- windows与linux之间文件的传输
这边记录一下如何在windows与linux之间进行文件的传输,下面是具体的网址. 原文地址::http://blog.csdn.net/shufac/article/details/51966276 ...
- IDEA_教你十分钟下载并破解IntelliJ IDEA(2017)(转)
之前都是用myeclipse,但是最近发现看的很多教学视频都是使用 IntelliJ IDEA,于是决定换个软件开始新的学习征程! 下面讲讲我是如何在十分钟之内安装并破解该软件. 1.首先,我找到了 ...
- 渲染引擎 & 页面渲染流程 & 阻塞
文档对象模型(Document Object Model,简称DOM) 浏览器渲染引擎 一个渲染引擎 主要模块: HTML 解析器 解释 HTML 文档的解析器,将 HTML 文本 解析成 DOM 树 ...
- hh
1
- | 线段树-地平线horizon
[题目描述]:在地平线上有n个建筑物.每个建筑物在地平线上可以看成一个下边界和地平线重合的矩形.每个建筑物有三个描述(Li ,Ri,Hi),分别表示该建筑物的左边界,右边界,高度.输出输出这些建筑物在 ...