<#def title = "颜色定义"/> <#def keyword = "ZhiqimUI"/> <#def desc = "颜色定义基本保持ZhiqimUI的风格不变,仍然使用z-前缀;默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义,包括字体颜色、背景颜色和边框颜色等,以及对应的样式名称。"/> <#def prevUrl = "rem.htm"/> <#def nextUrl = "font.htm"/> ${zhiqim_com_head()} ${zhiqim_com_head_main()} ${zhiqim_com_head_end()} ${zhiqim_com_mobileUI_scrollJs()} ${zhiqim_com_body()} ${zhiqim_com_topnav("ui")}
${zhiqim_com_container_ui("ZmUI", "css", "color")}
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "颜色定义")}
<#-- 标题 -->

颜色定义:

颜色定义基本保持ZhiqimUI的风格不变,仍然使用z-前缀;默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义,包括字体颜色、背景颜色和边框颜色等,以及对应的样式名称。

<#var colorMap = Jsons.toMap(context.getResourceString("/zhiqimUI/css/zhiqim.pre.json", "UTF-8"))/> <#-- 全局颜色 -->
全局颜色
名称 通配符 缺省值 举例 说明
全局文本颜色 ${textColor} ${colorMap.get("textColor")} 全局颜色 全局颜色定义,定义在body中
全局背景颜色 ${bgColor} ${colorMap.get("bgColor")} 全局背景 全局背景颜色,定义在body中
全局链接颜色 ${linkColor} ${colorMap.get("linkColor")} 链接效果 全局链接颜色,定义在a,a:visited中
全局链接Hover颜色 ${linkHoverColor} ${colorMap.get("linkHoverColor")} 全局链接颜色,定义在a:hover,a:focus,a:active中
<#-- 白色 -->
白色
名称 通配符 缺省值 举例 说明
白色文本 ${whiteTextColor} ${colorMap.get("whiteTextColor")} 白色文本 .z-text-white
白色背景 ${whiteBgColor} ${colorMap.get("whiteBgColor")} 白色背景 .z-bg-white
<#-- 黑色 -->
黑色
名称 通配符 缺省值 举例 说明
黑色文本 ${blackTextColor} ${colorMap.get("blackTextColor")} 黑色文本 .z-text-black
黑色背景 ${blackBgColor} ${colorMap.get("blackBgColor")} 黑色背景 .z-bg-black
<#-- 灰色 -->
灰色
名称 通配符 缺省值 举例 说明
灰色文本 ${grayTextColor} ${colorMap.get("grayTextColor")} 灰色文本 .z-text-gray
灰色背景 ${grayBgColor} ${colorMap.get("grayBgColor")} 灰色背景 .z-bg-gray
灰色边框 ${grayBdColor} ${colorMap.get("grayBdColor")} 灰色边框 .z-bd
灰色按钮文本 ${btnTextColor} ${colorMap.get("btnTextColor")} 灰色按钮
灰色按钮
灰色按钮
(按钮、筛选按钮)
橙色按钮
橙色按钮
橙色按钮
(多选按钮三种状态)
灰色按钮边框和背景 ${btnBdColor}
${btnBgColor}
${colorMap.get("btnBdColor")}
${colorMap.get("btnBgColor")}
灰色按钮
灰色hover背景 ${btnBgHoverColor} ${colorMap.get("btnBgHoverColor")}
灰色按钮
灰色按钮active背景 ${btnBgActiveColor} ${colorMap.get("btnBgActiveColor")}
灰色按钮
<#-- 红色 -->
红色
名称 通配符 缺省值 举例 说明
红色文本 ${redTextColor} ${colorMap.get("redTextColor")} 红色文本 .z-text-red
红色背景 ${redBgColor} ${colorMap.get("redBgColor")} 红色背景 .z-bg-red
红色边框 ${redBdColor} ${colorMap.get("redBdColor")} 红色边框 .z-bd.z-red
红色按钮边框 ${redBtnBdColor} ${colorMap.get("redBtnBdColor")}
红色按钮
红色按钮
红色按钮
红色按钮
(按钮、筛选按钮)
红色按钮
红色按钮
红色按钮
(多选按钮三种状态)
红色hover背景 ${redHoverColor} ${colorMap.get("redHoverColor")}
红色按钮
<#-- 橙色 -->
橙色
名称 通配符 缺省值 举例 说明
橙色文本 ${orangeTextColor} ${colorMap.get("orangeTextColor")} 橙色文本 .z-text-orange
橙色背景 ${orangeBgColor} ${colorMap.get("orangeBgColor")} 橙色背景 .z-bg-orange
橙色边框 ${orangeBdColor} ${colorMap.get("orangeBdColor")} 橙色边框 .z-bd.z-orange
橙色按钮边框 ${orangeBtnBdColor} ${colorMap.get("orangeBtnBdColor")}
橙色按钮
橙色按钮
橙色按钮
橙色按钮
(按钮、筛选按钮)
橙色按钮
橙色按钮
橙色按钮
(多选按钮三种状态)
橙色hover背景 ${orangeHoverColor} ${colorMap.get("orangeHoverColor")}
橙色按钮
<#-- 黄色 -->
黄色
名称 通配符 缺省值 举例 说明
黄色文本 ${yellowTextColor} ${colorMap.get("yellowTextColor")} 黄色文本 .z-text-yellow
黄色背景 ${yellowBgColor} ${colorMap.get("yellowBgColor")} 黄色背景 .z-bg-yellow
黄色边框 ${yellowBdColor} ${colorMap.get("yellowBdColor")} 黄色边框 .z-bd.z-yellow
黄色按钮边框 ${yellowBtnBdColor} ${colorMap.get("yellowBtnBdColor")}
黄色按钮
黄色按钮
黄色按钮
黄色按钮
(按钮、筛选按钮)
黄色按钮
黄色按钮
黄色按钮
(多选按钮三种状态)
黄色hover背景 ${yellowHoverColor} ${colorMap.get("yellowHoverColor")}
黄色按钮
<#-- 绿色 -->
绿色
名称 通配符 缺省值 举例 说明
绿色文本 ${greenTextColor} ${colorMap.get("greenTextColor")} 绿色文本 .z-text-green
绿色背景 ${greenBgColor} ${colorMap.get("greenBgColor")} 绿色背景 .z-bg-green
绿色边框 ${greenBdColor} ${colorMap.get("greenBdColor")} 绿色边框 .z-bd.z-green
绿色按钮边框 ${greenBtnBdColor} ${colorMap.get("greenBtnBdColor")}
绿色按钮
绿色按钮
绿色按钮
绿色按钮
(按钮、筛选按钮)
绿色按钮
绿色按钮
绿色按钮
(多选按钮三种状态)
绿色hover背景 ${greenHoverColor} ${colorMap.get("greenHoverColor")}
绿色按钮
<#--青色 -->
青色
青色
名称 通配符 缺省值 举例 说明
青色文本 ${cyanTextColor} ${colorMap.get("cyanTextColor")} 青色文本 .z-text-cyan
青色背景 ${cyanBgColor} ${colorMap.get("cyanBgColor")} 青色背景 .z-bg-cyan
青色边框 ${cyanBdColor} ${colorMap.get("cyanBdColor")} 青色边框 .z-bd.z-cyan
青色按钮边框 ${cyanBtnBdColor} ${colorMap.get("cyanBtnBdColor")}
青色按钮
青色按钮
青色按钮
青色按钮
(按钮、筛选按钮)
青色按钮
青色按钮
青色按钮
(多选按钮三种状态)
青色hover背景 ${cyanHoverColor} ${colorMap.get("cyanHoverColor")}
青色按钮
<#--蓝色 -->
蓝色
名称 通配符 缺省值 举例 说明
蓝色文本 ${blueTextColor} ${colorMap.get("blueTextColor")} 蓝色文本 .z-text-blue
蓝色背景 ${blueBgColor} ${colorMap.get("blueBgColor")} 蓝色背景 .z-bg-blue
蓝色边框 ${blueBdColor} ${colorMap.get("blueBdColor")} 蓝色边框 .z-bd.z-blue
蓝色按钮边框 ${blueBtnBdColor} ${colorMap.get("blueBtnBdColor")}
蓝色按钮
蓝色按钮
蓝色按钮
蓝色按钮
(按钮、筛选按钮)
蓝色按钮
蓝色按钮
蓝色按钮
(多选按钮三种状态)
蓝色hover背景 ${blueHoverColor} ${colorMap.get("blueHoverColor")}
蓝色按钮
<#--紫色 -->
紫色
名称 通配符 缺省值 举例 说明
紫色文本 ${purpleTextColor} ${colorMap.get("purpleTextColor")} 紫色文本 .z-text-purple
紫色背景 ${purpleBgColor} ${colorMap.get("purpleBgColor")} 紫色背景 .z-bg-purple
紫色边框 ${purpleBdColor} ${colorMap.get("purpleBdColor")} 紫色边框 .z-bd.z-purple
紫色按钮边框 ${purpleBtnBdColor} ${colorMap.get("purpleBtnBdColor")}
紫色按钮
紫色按钮
紫色按钮
紫色按钮
(按钮、筛选按钮)
紫色按钮
紫色按钮
紫色按钮
(多选按钮三种状态)
紫色hover背景 ${purpleHoverColor} ${colorMap.get("purpleHoverColor")}
紫色按钮
${zhiqim_turorial_ZmUI_demo_start()}
ZhiqimUI.mobile
这里是内容
${zhiqim_turorial_ZmUI_demo_end()}
${zhiqim_com_chapter()}
${zhiqim_com_footer()}