250 lines
8.7 KiB
HTML
250 lines
8.7 KiB
HTML
<#def title = "全局定义"/>
|
||
<#def keyword = "ZhiqimUI"/>
|
||
<#def desc = "全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分。"/>
|
||
<#def prevUrl = "../index.htm"/>
|
||
<#def nextUrl = "color.htm"/>
|
||
${zhiqim_com_header()}
|
||
${zhiqim_com_topnav()}
|
||
|
||
<!--容器开始 -->
|
||
<div id="container" class="container">
|
||
<!--边导航-->
|
||
${zhiqim_com_ui("tutorial", "ui", "css", "global")}
|
||
|
||
<!--主体-->
|
||
<div id="mainbody" class="mainbody">
|
||
${zhiqim_com_breadcrumb("文库", "教程", "全局定义")}
|
||
<div class="content">
|
||
|
||
<#-- 标题 -->
|
||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||
<p class="z-text-blue">全局定义：</p>
|
||
<p class="z-color-333" style="text-indent:38px;">
|
||
全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分：<br>
|
||
1、HTML5新模板和兼容：包括十二个block新标签、三个inline-block新标签，以及隐藏等其他属性；<br>
|
||
2、全局标记一致性定义：约定html、body、img、p等标签在所有浏览器中一致性定义；<br>
|
||
3、表单一致性定义：约定button、input、checkbox、radio等表单属性在所有浏览器中一致性定义。<br>
|
||
</p>
|
||
</div>
|
||
|
||
<#-- 全局HTML5新模板和兼容问题 -->
|
||
<div class="tutorial title">全局HTML5新模板和兼容问题</div>
|
||
|
||
<table class="z-table z-pd10 z-lh200p">
|
||
<tr>
|
||
<td class="zi-px18">一、十二个新标签（block）：</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<span class="z-text-prewrap z-pre">
|
||
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="zi-px18">二、三个新标签（inline-block）：</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<span class="z-text-prewrap z-pre">
|
||
audio,canvas,video{display:inline-block;vertical-align:baseline;}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="zi-px18">三、音频模块兼容性问题</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<span class="z-text-prewrap z-pre">
|
||
audio:not([controls]){display:none;height:0;}
|
||
|
||
为防止主流浏览器中，显示"不带控制按钮的音频模块"这一问题。以及解决iOS5移动端显示多余高度的兼容性问题。
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="zi-px18">四、有隐藏属性或标记为模板的的设置为隐藏</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<span class="z-text-prewrap z-pre">
|
||
[hidden],template{display:none;}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="zi-px18">五、设置svg非根元素的元素不显示仅占位</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<span class="z-text-prewrap z-pre">
|
||
svg:not(:root){overflow:hidden;}
|
||
|
||
只支持一个根元素如(<svg></svg>)，除了<svg>内部的，其他的都不显示
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<#-- 全局标记一致性定义 -->
|
||
<div class="tutorial title">全局标记一致性定义</div>
|
||
|
||
<table class="z-table z-pd10 z-lh200p z-bd-rd8">
|
||
<tr><td class="zi-px18">一、所有标签（*,*:before,*:after）</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
|
||
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
|
||
|
||
默认所有元素含插入内容前后宽高设置采用border-box方式，即宽高包括border和padding，向内扩充
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">二、HTML标签</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
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);/*iOS高亮色不透明*/
|
||
height:100%;
|
||
}
|
||
|
||
1、设置全局字体，防止一些设备上字体随屏幕放大而改变字体大小,如webkit的Safari
|
||
2、指定文档隐藏X轴滚动条，Y轴滚动条自动
|
||
3、当屏幕横坚切换时字体大小调整和以前一样
|
||
4、iOS下链接点中是修改为黑色
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">二、默认字体大小行高颜色、背景颜色，无外边框</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
body{color:#333;background-color:#fff;}
|
||
body,table,td,div{font-size:12px;line-height:120%;}
|
||
body,form,figure{margin:0;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">三、图片无边框、居中、不超时父边框宽高，IE7以上支持缩放不失真（bicubic）</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
img{border:0;vertical-align:middle;max-width:100%;max-height:100%;-ms-interpolation-mode:bicubic;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">四、段落无内外边距，这样p和br功能相同</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
p{margin:0px;padding:0px;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">五、字段集合默认边框、左右两像素外边距，和内边距设置，名称无边框和内边距</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
p{margin:0px;padding:0px;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">六、分隔线修改为上边框一条1像素的线，上下1em高度</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
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;
|
||
}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">七、列表无前序号，无内外边距，行高1.25em</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
ul,dl,ol,li{list-style:none;padding:0;margin:0;}
|
||
li{line-height:1.25em;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">八、链接，初始和访问后相同，淡黑色背景透明，移入无下标线、默认淡青色</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
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;}
|
||
|
||
<a href="javascript:void(0);">这里是文本连接效果</a>
|
||
</span>
|
||
</td></tr>
|
||
</table>
|
||
|
||
<#-- 表单一致性定义 -->
|
||
<div class="tutorial title">表单一致性定义</div>
|
||
|
||
<table class="z-table z-pd10 z-lh200p z-bd-rd8">
|
||
<tr><td class="zi-px18">一、统一按钮和输入框无内外边距（Firefox默认按扭和输入框padding 0 2px）</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">二、输入框行高强制成正常（各个浏览器默认值不一样）</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
input{line-height:normal;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">三、表单控件不显示选中边框（webkit默认有边框）</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
button,input,select,optgroup,textarea{color:inherit;font:inherit;margin:0;outline:none;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">四、按钮可见，webkit渲染，不可用时手势为禁止，取消可能的大小写文本转换</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
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;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">五、单多选按钮有2像素偏下,IE高度和背景白色问题，修改成高度为13px，背景透明</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
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;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">六、选项框（select）中的分组默认加粗</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
optgroup{font-weight:bold;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">七、移动设备上webkit自定义数字框高度自动</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}
|
||
</span>
|
||
</td></tr>
|
||
<tr><td class="zi-px18">八、移动设备上webkit自定义搜索框为文本字段，宽高设置采用content-box，按钮取消原生样式</td></tr>
|
||
<tr><td>
|
||
<span class="z-text-prewrap z-pre">
|
||
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;
|
||
}
|
||
</span>
|
||
</td></tr>
|
||
</table>
|
||
${zhiqim_com_chapter()}
|
||
</div>
|
||
|
||
<!-- 主体结束 -->
|
||
</div>
|
||
|
||
<!-- 容器结束 -->
|
||
</div>
|
||
${zhiqim_com_footer()} |