分享来自开源 Alice 样式库解决方案

  1 @charset "utf-8";
  2 
  3 /* 
  4     @名称: base
  5     @功能: 重设浏览器默认样式
  6 */
  7 
  8 /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
  9 html{
 10     color:#000;background:#fff;
 11     -webkit-text-size-adjust: 100%;
 12     -ms-text-size-adjust: 100%;
 13 }
 14 
 15 /* 内外边距通常让各个浏览器样式的表现位置不同 */
 16 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 {
 17     margin:0;padding:0;
 18 }
 19 
 20 /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
 21 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 
 22     display:block;
 23 }
 24 
 25 /* HTML5 媒体文件跟 img 保持一致 */
 26 audio,canvas,video {
 27     display: inline-block;*display: inline;*zoom: 1;
 28 }
 29 
 30 /* 要注意表单元素并不继承父级 font 的问题 */
 31 body,button,input,select,textarea{
 32     font:12px/1.5 tahoma,arial,\5b8b\4f53;
 33 }
 34 input,select,textarea{
 35     font-size:100%;
 36 }
 37 
 38 /* 去掉各Table  cell 的边距并让其边重合 */
 39 table{
 40     border-collapse:collapse;border-spacing:0;
 41 }
 42 
 43 /* IE bug fixed: th 不继承 text-align*/
 44 th{
 45     text-align:inherit;
 46 }
 47 
 48 /* 去除默认边框 */
 49 fieldset,img{
 50     border:0;
 51 }
 52 
 53 /* ie6 7 8(q) bug 显示为行内表现 */
 54 iframe{
 55     display:block;
 56 }
 57 
 58 /* 去掉 firefox 下此元素的边框 */
 59 abbr,acronym{
 60     border:0;font-variant:normal;
 61 }
 62 
 63 /* 一致的 del 样式 */
 64 del {
 65     text-decoration:line-through;
 66 }
 67 
 68 address,caption,cite,code,dfn,em,th,var {
 69     font-style:normal;
 70     font-weight:500;
 71 }
 72 
 73 /* 去掉列表前的标识, li 会继承 */
 74 ol,ul {
 75     list-style:none;
 76 }
 77 
 78 /* 对齐是排版最重要的因素, 别让什么都居中 */
 79 caption,th {
 80     text-align:left;
 81 }
 82 
 83 /* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
 84 h1,h2,h3,h4,h5,h6 {
 85     font-size:100%;
 86     font-weight:500;
 87 }
 88 
 89 q:before,q:after {
 90     content:'';
 91 }
 92 
 93 /* 统一上标和下标 */
 94 sub, sup {
 95     font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
 96 }
 97 sup {top: -0.5em;}
 98 sub {bottom: -0.25em;}
 99 
100 
101 
102 /* 让链接在 hover 状态下显示下划线 */
103 a:hover {
104     text-decoration:underline;
105 }
106 
107 /* 默认不显示下划线，保持页面简洁 */
108 ins,a {
109     text-decoration:none;
110 }
111 
112 /* 清理浮动 */
113 .fn-clear:after {
114     visibility:hidden;
115     display:block;
116     font-size:0;
117     content:" ";
118     clear:both;
119     height:0;
120 }
121 .fn-clear {
122     zoom:1; /* for IE6 IE7 */
123 }
124 
125 /* 隐藏, 通常用来与 JS 配合 */
126 body .fn-hide {
127     display:none;
128 }
129 
130 /* 设置内联, 减少浮动带来的bug */
131 .fn-left,.fn-right {
132     display:inline;
133 }
134 .fn-left {
135     float:left;
136 }
137 .fn-right {
138     float:right;
139 }
posted on 2012-08-20 16:27 广广丫阅读(460) 评论(0) 收藏举报
刷新页面返回顶部
广广丫快快跑

公告
