├── .gitignore ├── README.md ├── package.json └── src └── base.css /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .idea/ 3 | .ipr 4 | .iws 5 | *~ 6 | ~* 7 | *.diff 8 | *.patch 9 | *.bak 10 | .DS_Store 11 | Thumbs.db 12 | .project 13 | .*proj 14 | .svn/ 15 | dist/ 16 | *.swp 17 | *.swo 18 | *.pyc 19 | *.pyo 20 | build 21 | node_modules 22 | _site 23 | sea-modules 24 | .cache 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | I# base 2 | 3 | --- 4 | 5 | 全局重置样式，还包括一些常用的类。 6 | 7 | > 通用组件不要依赖我，直接使用的样式文件可以依赖。 8 | 9 | --- 10 | 11 | ## 演示 12 | 13 | > 不需要演示了。 14 | 15 | ## 常用功能类 16 | 17 | fn-clear、fn-left、fn-rmb、fn-webkit-adjust、fn-textoverflow、fn-hide、fn-linear、fn-linear-light 。 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alice-base", 3 | "version": "1.1.1", 4 | "description": "支付宝全局 reset 样式", 5 | "homepage": "http://aliceui.org/base", 6 | "author": "", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/aliceui/base" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/aliceui/base/issues" 13 | }, 14 | "license": "MIT", 15 | "spm": { 16 | "main": "src/base.css" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/base.css: -------------------------------------------------------------------------------- 1 | /* alice.base 样式模块 */ 2 | 3 | /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ 4 | html { 5 | color:#000;background:#fff; 6 | -webkit-text-size-adjust: 100%; 7 | -ms-text-size-adjust: 100%; 8 | } 9 | 10 | /* 内外边距通常让各个浏览器样式的表现位置不同 */ 11 | 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 { 12 | margin:0;padding:0; 13 | } 14 | 15 | /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ 16 | article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 17 | display:block; 18 | } 19 | 20 | /* HTML5 媒体文件跟 img 保持一致 */ 21 | audio,canvas,video { 22 | display: inline-block;*display: inline;*zoom: 1; 23 | } 24 | 25 | /* 要注意表单元素并不继承父级 font 的问题 */ 26 | body,button,input,select,textarea { 27 | font:12px/1.5 tahoma,arial,"Hiragino Sans GB",\5b8b\4f53; 28 | } 29 | input,select,textarea { 30 | font-size:100%; 31 | } 32 | 33 | /* 去掉各Table cell 的边距并让其边重合 */ 34 | table { 35 | border-collapse:collapse;border-spacing:0; 36 | } 37 | 38 | /* IE bug fixed: th 不继承 text-align*/ 39 | th { 40 | text-align:inherit; 41 | } 42 | 43 | /* 去除默认边框 */ 44 | fieldset,img { 45 | border:0; 46 | } 47 | 48 | /* ie6 7 8(q) bug 显示为行内表现 */ 49 | iframe { 50 | display:block; 51 | } 52 | 53 | /* 去掉 firefox 下此元素的边框 */ 54 | abbr,acronym { 55 | border:0;font-variant:normal; 56 | } 57 | 58 | /* 一致的 del 样式 */ 59 | del { 60 | text-decoration:line-through; 61 | } 62 | 63 | address,caption,cite,code,dfn,em,th,var { 64 | font-style:normal; 65 | font-weight:500; 66 | } 67 | 68 | /* 去掉列表前的标识, li 会继承 */ 69 | ol,ul { 70 | list-style:none; 71 | } 72 | 73 | /* 对齐是排版最重要的因素, 别让什么都居中 */ 74 | caption,th { 75 | text-align:left; 76 | } 77 | 78 | /* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ 79 | h1,h2,h3,h4,h5,h6 { 80 | font-size:100%; 81 | font-weight:500; 82 | } 83 | 84 | q:before,q:after { 85 | content:''; 86 | } 87 | 88 | /* 统一上标和下标 */ 89 | sub, sup { 90 | font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; 91 | } 92 | sup { top: -0.5em; } 93 | sub { bottom: -0.25em; } 94 | 95 | /* 正常链接 未访问 */ 96 | a:link { 97 | color: #0ae; 98 | } 99 | 100 | /* 鼠标悬停 */ 101 | a:hover { 102 | color: #0ae; 103 | text-decoration: underline; 104 | } 105 | 106 | /* 默认不显示下划线，保持页面简洁 */ 107 | ins,a { 108 | text-decoration:none; 109 | } 110 | 111 | /* 代码字体 */ 112 | code, 113 | kbd, 114 | pre, 115 | samp { 116 | font-family: monospace, serif; 117 | font-size: 1em; 118 | } 119 | 120 | /* 清理浮动 */ 121 | .fn-clear:after { 122 | visibility:hidden; 123 | display:block; 124 | font-size:0; 125 | content:" "; 126 | clear:both; 127 | height:0; 128 | } 129 | .fn-clear { 130 | zoom:1; /* for IE6 IE7 */ 131 | } 132 | 133 | /* 隐藏, 通常用来与 JS 配合 */ 134 | body .fn-hide { 135 | display:none; 136 | } 137 | 138 | /* 设置内联, 减少浮动带来的bug */ 139 | .fn-left, 140 | .fn-right { 141 | display:inline; 142 | } 143 | .fn-left { 144 | float:left; 145 | } 146 | .fn-right { 147 | float:right; 148 | } 149 | 150 | /* 单行文字溢出时出现省略号，需设定宽度 */ 151 | .fn-text-overflow { 152 | overflow: hidden; 153 | text-overflow: ellipsis; 154 | white-space: nowrap; 155 | } 156 | 157 | /* 简单的渐变 */ 158 | .fn-linear { 159 | background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f1f1f1)); 160 | background: -moz-linear-gradient(top, #fcfcfc, #f1f1f1); 161 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f1f1f1'); 162 | background:-o-linear-gradient(top, #fcfcfc, #f1f1f1); 163 | background:-ms-linear-gradient(top, #fcfcfc, #f1f1f1); 164 | background: linear-gradient(to bottom, #fcfcfc, #f1f1f1); 165 | } 166 | 167 | /* 浅色的渐变 */ 168 | .fn-linear-light { 169 | background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f9f9f9)); 170 | background: -moz-linear-gradient(top, #fcfcfc, #f9f9f9); 171 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f9f9f9'); 172 | background:-o-linear-gradient(top, #fcfcfc, #f9f9f9); 173 | background:-ms-linear-gradient(top, #fcfcfc, #f9f9f9); 174 | background: linear-gradient(to bottom, #fcfcfc, #f9f9f9); 175 | } 176 | 177 | /* 人民币符号 */ 178 | .fn-rmb { 179 | font-family: arial; 180 | font-style: normal; 181 | padding-right: 4px; 182 | } 183 | 184 | 185 | /* chrome 下字体过小的问题 */ 186 | .fn-webkit-adjust { 187 | -webkit-text-size-adjust: none; 188 | } 189 | --------------------------------------------------------------------------------