@charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ html{ color:#333; background:#fff; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-rendering:optimizelegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: grayscale; } /* 如果你的项目仅支持 IE9+ | Chrome | Firefox 等，推荐在 中添加 .borderbox 这个 class */ html.borderbox *, html.borderbox *:before, html.borderbox *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section{ margin:0; padding:0; } /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ article, aside, details, figcaption, figure, footer, header, menu, nav, section{ display:block; } /* HTML5 媒体文件跟 img 保持一致 */ audio, canvas, video{ display:inline-block; *display:inline; *zoom:1; } /* 要注意表单元素并不继承父级 font 的问题 */ body, button, input, select, textarea{ font:400 1em/1.8 Avenir, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; } /* 去除 IE6 input/button 多余的空白 */ button, input{ *width:auto; *overflow:visible; /* 让 input 和 button 一样高 */ line-height:normal; } button::-moz-focus-inner, input::-moz-focus-inner{ padding:0; border:0; } /* 去掉各Table cell 的边距并让其边重合 */ table{ border-collapse:collapse; border-spacing:0; } /* IE bug fixed: th 不继承 text-align */ th{ text-align:inherit; } /* 去除默认边框 */ fieldset, img{ border:0; } /* 解决 IE6-7 图片缩放锯齿问题 */ img{ -ms-interpolation-mode:bicubic; } /* ie6 7 8(q) bug 显示为行内表现 */ iframe{ display:block; } /* 块/段落引用 */ blockquote { position:relative; color: #999; font-weight:300; font-family:Avenir, 'Helvetica Neue', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; border-left:1px solid #1abc9c; padding-left:1em; margin:1em 3em 1em 2em; } @media only screen and ( max-width:640px ){ blockquote{ margin:1em 0; } } /* Firefox 以外，元素没有下划线，需添加 */ acronym, abbr{ border-bottom:1px dotted; font-variant:normal; } /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ abbr{ cursor:help; } /* 一致的 del 样式 */ del{ text-decoration:line-through; } address, caption, cite, code, dfn, em, th, var{ font-style:normal; font-weight:400; } /* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */ ul, ol{ list-style:none; } /* 对齐是排版最重要的因素, 别让什么都居中 */ caption, th{ text-align:left; } q:before, q:after{ content:''; } /* 统一上标和下标 */ sub, sup{ font-size:75%; line-height:0; position:relative; } :root sub, :root sup{ vertical-align:baseline; /* for ie9 and other modern browsers */ } sup{ top:-0.5em; } sub{ bottom:-0.25em; } /* 让链接在 hover 状态下显示下划线 */ a{ color:#1abc9c; } a:hover{ text-decoration:underline; } .typo a{ border-bottom:1px solid #1abc9c; } .typo a:hover{ border-bottom-color:#555; color:#555; text-decoration:none; } /* 默认不显示下划线，保持页面简洁 */ ins, a{ text-decoration:none; } /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的， * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号 * 关于 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated * 一篇关于 标签的很好文章：http://html5doctor.com/u-element/ */ u, .typo-u{ text-decoration:underline; } /* 标记，类似于手写的荧光笔的作用 */ mark{ background:#fffdd1; border-bottom:1px solid #ffedce; padding:2px;margin:0 5px; } /* 代码片断 */ pre, code, pre tt{ font-family:Courier, 'Courier New', monospace; } pre{ background:#f8f8f8; border:1px solid #ddd; padding:1em 1.5em; display:block; -webkit-overflow-scrolling: touch; } /* 一致化 horizontal rule */ hr{ border:none; border-bottom:1px solid #cfcfcf; margin-bottom:10px; *color:pink; *filter:chroma(color=pink); height:10px; *margin:-7px 0 2px; } /* 底部印刷体、版本等标记 */ small, .typo-small, /* 图片说明 */ figcaption{ font-size:0.9em; color:#888; } strong, b{font-weight:bold;color:#000;} /* 可拖动文件添加拖动手势 */ [draggable]{ cursor:move; } .clearfix:before, .clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ zoom:1; } /* 强制文本换行 */ .textwrap, .textwrap td, .textwrap th{ word-wrap:break-word; word-break:break-all; } .textwrap-table{ table-layout:fixed; } /* 提供 serif 版本的字体设置: iOS 下中文自动 fallback 到 sans-serif */ .serif{ font-family:Palatino, Optima, Georgia, serif; } /* 保证块/段落之间的空白隔行 */ .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, .typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote{ margin-bottom:1.8em; } h1, h2, h3, h4, h5, h6{ font-family:'Helvetica Neue', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; font-weight:200; color:#000; } /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */ .typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6, .typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6{ margin-bottom:0.4em; line-height:1.5; } .typo h1, .typo-h1{ font-size:2em; } .typo h2, .typo-h2{ font-size:1.8em; } .typo h3, .typo-h3{ font-size:1.6em; } .typo h4, .typo-h4{ font-size:1.4em; } .typo h5, .typo h6, .typo-h5, .typo-h6{ font-size:1.2em; } /* 在文章中，应该还原 ul 和 ol 的样式 */ .typo ul, .typo-ul{ margin-left:1.3em; list-style:disc; } .typo ol, .typo-ol{ list-style:decimal; margin-left:1.9em; } .typo li ul, .typo li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol{ margin-top:0; margin-bottom:0; margin-left:2em; } .typo li ul, .typo-ul ul, .typo-ol ul{ list-style:circle; } /* 同 ul/ol，在文章中应用 table 基本格式 */ .typo table th, .typo table td, .typo-table th, .typo-table td .typo table caption{ border:1px solid #ddd; padding:0.5em 1em; color:#666; } .typo table th, .typo-table th{ background:#fbfbfb; } .typo table thead th, .typo-table thead th{ background:#f1f1f1; } .typo table caption{ border-bottom:none; } /* 去除 webkit 中 input 和 textarea 的默认样式 */ .typo-input, .typo-textarea{ -webkit-appearance:none; border-radius:0; } /* 高亮选中 */ ::-moz-selection{ background:#08c; color:#fff; } ::selection{ background:#08c; color:#fff; } .typo-em, .typo em, legend, caption{ color:#000; font-weight:inherit; } /* 着重号，只能在少量（少于100个字符）且全是全角字符的情况下使用 */ .typo-em { position: relative; } .typo-em:after { position: absolute; top: 0.65em; left: 0; width: 100%; overflow: hidden; content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; } /* Responsive images */ .typo img{ max-width: 100%; } /*-----------------------*/ .ui-header{ height: 4em; background-color: #fefefe; background-image: -moz-linear-gradient(top,#fefefe,#eee); background-image: -ms-linear-gradient(top,#fefefe,#eee); background-image: -webkit-gradient(linear,0 0,0 100%,from(#eee),to(#fefefe)); background-image: -webkit-linear-gradient(top,#fefefe,#eee); background-image: -o-linear-gradient(top,#fefefe,#eee); background-image: linear-gradient(top,#fefefe,#eee); background-repeat: repeat-x; border-bottom: 1px solid #ccc; box-shadow: 0 1px 2px rgba(11,11,11,.1); padding-left: 2em;padding-right: 2em; margin-bottom: 1em; } .ui-header-title{ color:#333; } .ui-header-tip{ color:#666; font-size: 0.7em; } .ui-header-more{ color:#666; float:right; font-size:0.5em; line-height: 4em; } .ui-header-more iframe{ position: relative;top:16px; } .ui-box{ padding-left: 2em; padding-right: 2em; } script.show, textarea.show{ display:block; width:100%; overflow-x:auto; padding:0.5em; color:#f8f8f2; background:#2d2d2d; border:none; box-shadow:0px 0px 3px rgba(1,1,3,.1); -webkit-text-size-adjust:none; margin-top: 1em; margin-bottom:1em; border-radius:3px; white-space: pre; line-height: 1.4; font-family:consolas,monospace; } script#data:before, script#source:before, script#helper:before, textarea#result:before{ opacity: .8; display: block; border-bottom: 1px dotted #eee; margin-bottom: 10px; } script#source:before{ content: "模板："; } script#data:before{ content: "数据："; } script#helper:before{ content: "helper："; } .expandingArea{ position:relative; margin-top: 3em; } .expandingArea:before{ content: "渲染结果源码："; position: absolute;top:-2em; font-weight: bold; } textarea#result{ position:absolute; top:0; left:0; height:100%; margin:0; padding:0; padding:.5em; line-height: 1.4; } .expandingArea pre{ line-height: 1.4; padding:0; display:block; visibility:hidden; } .ui-dom{ border:1px solid #EEE; border-radius: 3px; margin-top: 2em; margin-bottom: 2em; padding:.5em; } .ui-dom em{ font-style: italic; } .ui-dom:before { content: "渲染结果预览："; display: block; border-bottom: 1px dotted #333; margin-bottom: 10px; } .ui-error{ display: none; color: #a94442; background-color: #f2dede; border:1px solid #ebccd1; border-radius: 4px; padding:.3em; box-sizing: border-box; position: fixed; bottom:10px; left:2%; width:96%; }