基础框架base通用样式

作者:Liaodeity - 2015年05月12日

它扫除了浏览器默认样式的基本兼容性问题,像建筑的地基一样,让开发者在平地上放心的建造大楼。 Alice 的 base.css 是结合支付宝开发经验,借鉴 normalize.css等业界优秀模块,并加上一些常用 className 而产出的一套重设样式。

字体

alice/base 采用了 12 像素,1.5 的行高,并且兼容 Mac 和 Window 的字体配置,非常适合国内的网站样式。

body,button,input,select,textarea {
    font:12px/1.5 tahoma,arial,"Hiragino Sans GB",\5b8b\4f53;
}

常用功能类

fn-clear 清除浮动

fn-hide 隐藏元素

fn-left fn-right 左右浮动

fn-text-overflow 文字单行溢出省略号


文字很长很长很长

fn-linear 简单渐变

fn-linear-light 浅色的简单渐变

fn-rmb 金额样式 ¥23.67

fn-webkit-adjust 用于修复 webkit 下小于 10px 的中文字体 应该已失效

我们使用 fn- 前缀表示一些常用的工具类名,灵活使用这些类会大大提高样式开发效率。

样式如下:

/* alice.base 样式模块 */

/* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */
html { color: #000; background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body, div, 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, hgroup, menu, nav, section { margin: 0; padding: 0; }
/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* HTML5 媒体文件跟 img 保持一致 */
audio, canvas, video { display: inline-block; *display: inline;
*zoom: 1;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", \5b8b\4f53; }
input, select, textarea { font-size: 100%; }
/* 去掉各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 8(q) bug 显示为行内表现 */
iframe { display: block; }
/* 去掉 firefox 下此元素的边框 */
abbr, acronym { border: 0; font-variant: normal; }
/* 一致的 del 样式 */
del { text-decoration: line-through; }
address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: 500; }
/* 去掉列表前的标识, li 会继承 */
ol, ul { list-style: none; }
/* 对齐是排版最重要的因素, 别让什么都居中 */
caption, th { text-align: left; }
/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }
q:before, q:after { content: ''; }
/* 统一上标和下标 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* 正常链接 未访问 */
a:link { color: #08c; }
/* 鼠标悬停 */
a:hover { color: #08c; text-decoration: underline; }
/* 默认不显示下划线,保持页面简洁 */
ins, a { text-decoration: none; }
/* 代码字体 */
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
/* 清理浮动 */
.fn-clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.fn-clear { zoom: 1; /* for IE6 IE7 */ }
/* 隐藏, 通常用来与 JS 配合 */
body .fn-hide { display: none; }
/* 设置内联, 减少浮动带来的bug */
.fn-left, .fn-right { display: inline; }
.fn-left { float: left; }
.fn-right { float: right; }
/* 单行文字溢出时出现省略号,需设定宽度 */ 
.fn-text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 简单的渐变 */
.fn-linear { background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f1f1f1)); background: -moz-linear-gradient(top, #fcfcfc, #f1f1f1);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f1f1f1');
background: -o-linear-gradient(top, #fcfcfc, #f1f1f1); background: -ms-linear-gradient(top, #fcfcfc, #f1f1f1); background: linear-gradient(to bottom, #fcfcfc, #f1f1f1); }
/* 浅色的渐变 */
.fn-linear-light { background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f9f9f9)); background: -moz-linear-gradient(top, #fcfcfc, #f9f9f9);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f9f9f9');
background: -o-linear-gradient(top, #fcfcfc, #f9f9f9); background: -ms-linear-gradient(top, #fcfcfc, #f9f9f9); background: linear-gradient(to bottom, #fcfcfc, #f9f9f9); }
/* 人民币符号 */
.fn-rmb { font-family: arial; font-style: normal; padding-right: 4px; }
/* chrome 下字体过小的问题 */
.fn-webkit-adjust { -webkit-text-size-adjust: none; }


本文作者: Liaodeity

本文链接: https://www.jianbaizhan.com/article/209

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!