<#-- 标题 -->

全局定义：

全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分：
1、HTML5新模板和兼容：包括十二个block新标签、三个inline-block新标签，以及隐藏等其他属性；
2、全局标记一致性定义：约定html、body、img、p等标签在所有浏览器中一致性定义；
3、表单一致性定义：约定button、input、checkbox、radio等表单属性在所有浏览器中一致性定义。

<#-- 全局HTML5新模板和兼容问题 -->

全局HTML5新模板和兼容问题

一、十二个新标签（block）：

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}

二、三个新标签（inline-block）：

audio,canvas,video{display:inline-block;vertical-align:baseline;}

三、音频模块兼容性问题

audio:not([controls]){display:none;height:0;} 为防止主流浏览器中，显示"不带控制按钮的音频模块"这一问题。以及解决iOS5移动端显示多余高度的兼容性问题。

四、有隐藏属性或标记为模板的的设置为隐藏

[hidden],template{display:none;}

五、设置svg非根元素的元素不显示仅占位

svg:not(:root){overflow:hidden;} 只支持一个根元素如(<svg></svg>)，除了<svg>内部的，其他的都不显示

<#-- 全局标记一致性定义 -->

全局标记一致性定义

一、所有标签（*,*:before,*:after）

*{border-box;box-sizing:border-box;} *:before,*:after{box-sizing:border-box;} 默认所有元素含插入内容前后宽高设置采用border-box方式，即宽高包括border和padding，向内扩充

二、HTML标签

html{ font-family:"微软雅黑","宋体",Arial,sans-serif; overflow-x:hidden;overflow-y:auto; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } @media screen and (max-width: 320px) { html { font-size:83.33px; font-size:26.66667vw } } ... ... @media screen and (min-width: 769px) { html { font-size:204.8px } } html,body{width:100%;height:100%;position:relative;overflow:hidden;} 1、设置全局字体，防止一些设备上字体随屏幕放大而改变字体大小,如webkit的Safari 2、指定文档宽高并隐藏超出 3、当屏幕横坚切换时字体大小调整和以前一样 4、文档字体大小以rem为主，所以用@media screen自定义不同的html字体大小

二、默认字体大小行高颜色、背景颜色，无外边框

body{color:#333;background-color:#fff;} body,table,td,div{font-size:12px;line-height:120%;} body,form,figure{margin:0;}

三、图片无边框、居中、不超时父边框宽高，IE7以上支持缩放不失真（bicubic）

img{border:0;vertical-align:middle;max-width:100%;max-height:100%;-ms-interpolation-mode:bicubic;}

四、段落无内外边距，这样p和br功能相同

p{margin:0px;padding:0px;}

五、字段集合默认边框、左右两像素外边距，和内边距设置，名称无边框和内边距

p{margin:0px;padding:0px;}

六、分隔线修改为上边框一条1像素的线，上下1em高度

hr{ -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; height:0;border:0;border-top:1px solid #eee;margin:1em 0; }

七、列表无前序号，无内外边距，行高1.25em

ul,dl,ol,li{list-style:none;padding:0;margin:0;} li{line-height:1.25em;}

八、链接，初始和访问后相同，淡黑色背景透明，移入无下标线、默认淡青色

a,a:visited{color:#333;text-decoration:none;background-color:transparent;} a:focus{color:#43cd6e;outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} a:active,a:hover{color:#43cd6e;outline:0;text-decoration:underline;} 这里是文本连接效果

<#-- 表单一致性定义 -->

表单一致性定义

一、统一按钮和输入框无内外边距（Firefox默认按扭和输入框padding 0 2px）

button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}

二、输入框行高强制成正常（各个浏览器默认值不一样）

input{line-height:normal;}

三、表单控件不显示选中边框（webkit默认有边框）

button,input,select,optgroup,textarea{color:inherit;font:inherit;margin:0;outline:none;}

四、按钮可见，webkit渲染，不可用时手势为禁止，取消可能的大小写文本转换

button{overflow:visible;} button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance:button;cursor:pointer;} button[disabled],html input[disabled]{cursor:not-allowed;} button,select{text-transform:none;}

五、单多选按钮有2像素偏下,IE高度和背景白色问题，修改成高度为13px，背景透明

input[type="checkbox"],input[type="radio"]{margin-top:-2px;border:0;padding:0;vertical-align:middle;height:13px;background-color:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

六、选项框（select）中的分组默认加粗

optgroup{font-weight:bold;}

七、移动设备上webkit自定义数字框高度自动

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}

八、移动设备上webkit自定义搜索框为文本字段，宽高设置采用content-box，按钮取消原生样式

input[type="search"]{ -webkit-appearance:textfield; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; }

${zhiqim_turorial_ZmUI_demo_start()}

ZhiqimUI.mobile

文案文案文案文案

这里是内容

${zhiqim_turorial_ZmUI_demo_end()}