@charset "UTF-8"; /*引进图片合并给一个变量(后面会用到这个变量)*/ $sprites:sprite-map("pwd/*.png",$spacing:8px,$layout: vertical); /*转换px到rem*/ $browser-default-font-size : 20px !default; @function pxTorem($px){ @if $px == 0{$px:0px} @return $px / $browser-default-font-size * 1rem; } @function pxTo2rem($px){ @if $px == 0{$px:0px} @return $px / ($browser-default-font-size*2) * 1rem; } /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/ $media:ture; @mixin iconItem($sprites,$name,$iE6:null){ background-image:sprite-url($sprites); //获取整个雪碧图路径 background-repeat:no-repeat; @if $iE6 != null{ //null _background-image:sprite-url($iE6); //此处传进来的格式须是png8 } $image-width(sprite-file($sprites,$name)); //sprite-file 获取目标图片 $height:image-height(sprite-file($sprites,$name)); //获取目标图片 $toalWidth:image-width(sprite-path($sprites)); //获取整张图的宽度 $totalHeight:image-height(sprite-path($sprites)); //获取整张图的高度 $widthHalf:ceil($width/2); //获取宽度的一半 $heightHalf:ceil($height/2); //获取高度的一半 //sprite-position 获取目标图的位置,nth操作数组 $posX:round(nth(sprite-position($sprites,$name),1)); //获取沿x轴的位移 $posY:round(nth(sprite-position($sprites, $name), 2)); //获取沿y轴的位移 @if $media{//wap height:pxTorem($heightHalf); pxTorem($widthHalf); background-position: pxTo2rem($posX) pxTo2rem($posY); background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight); } @else{//PC height:$height; $width; background-position:sprite-position($sprites,$name); } } /*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/ @mixin timestampImg($imgUrl){ background-image:image-url($imgUrl); background-repeat:no-repeat; $image-width($imgUrl); $height:image-height($imgUrl); @if $media{ //wap pxTo2rem($width); height:pxTo2rem($height); background-size:pxTo2rem($width) pxTo2rem($height); } @else{ height:$height; $width; } } /*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/ @mixin base64Img($imgUrl){ //这里一定要分开写background 不然会引起background-size 与background合并引起手机端无法显示 background-image:inline-image($imgUrl); background-repeat:no-repeat; $image-width($imgUrl); $height:image-height($imgUrl); @if $media{ //wap pxTo2rem($width); height:pxTo2rem($height); background-size:pxTo2rem($width) pxTo2rem($height); } @else{ height:$height; $width; } } //圆角 @mixin boradius($size){ -webkit-border-radius:$size; -moz-border-radius:$size; -o-border-radius:$size; -ms-border-radius:$size; border-radius:$size; } %box{ -webkit-box-sizing: border-box; box-sizing: border-box; } %inlineb{display:inline-block;} %block{display:block;} //绝对居中 @mixin pscenter($width,$height){ $width; height:$height; position:absolute; left:50%; top:50%; margin:(-$height/2) 0 0 (-$width/2) } // 文字隐藏 %text_indent { font-size: 0; color: rgba(0,0,0,0); text-indent: -9999em; overflow: hidden; } // 文字自动换行 %text_break { word-break: break-all; } // 文字省略：单行 %text_oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // 文字省略：两行 %text_twoline { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } // 文字省略：自定义多行 @mixin elli($elli) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $elli; -webkit-box-orient: vertical; } // flex 布局 %box { display: box; display: -ms-box; display: -webkit-box; display: flex; display: -ms-flexbox; display: -webkit-flex; } %flex { display: block; flex: 1; -ms-flex: 1; -webkit-flex: 1; box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; } // 清除表单样式 %input_clear { border: none; background: none; -webkit-appearance: none; -webkit-border-radius: 0; } // 固定定位条 %fixedBar { position: fixed; left: 0; right: 0; 100%; } /* ************************全局模块样式************************** */ * { -webkit-tap-highlight-color: transparent; outline: 0; } body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; } img { border: 0 none; vertical-align: top; } a img{border:0 none} i, em { font-style: normal; } ol, ul { list-style: none; } input, select, button,textarea, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; } table { border-collapse: collapse; border-spacing: 0; } a, a:visited { text-decoration: none; color: #333; } a:focus{ outline:0; } html,body{font-size:$browser-default-font-size;height:100%; } body { margin: 0 auto; min- 320px; max- 640px; background: #fff; // font-size: 14px; font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; -webkit-user-select: none; user-select: none; } .g_cf:after{ display:block; content:'20'; clear:both; height:0; visibility:hidden; } input{-webkit-appearance: none;} .g_cf{ *zoom:1; overflow:hidden } .g_h10{height:pxTo2rem(10px);} .g_h20{height:pxTo2rem(20px);} .g_h30{height:pxTo2rem(30px);} .g_h35{height:pxTo2rem(35px)} .g_h100{height:pxTo2rem(100px)}
扩展:
@content：在sass3.2.0中引入， 可以用来解决css3中 @meidia 或者 @keyframes 带来的问题。它可以使@mixin接受一整块样式，接收的样式从@content开始
//sass 样式 @mixin max-screen($res){ @media only screen and ( max- $res ) { @content; } } @include max-screen(480px) { body { color: red } } //css 编译后样式 @media only screen and (max- 480px) { body { color: red } }
使用@content解决@keyframes关键帧的浏览器前缀问题
// 初始化变量 $browser: null; // 设置关键帧 @mixin keyframes($name) { @-webkit-keyframes #{$name} { $browser: '-webkit-'; @content; } @-moz-keyframes #{$name} { $browser: '-moz-'; @content; } @-o-keyframes #{$name} { $browser: '-o-'; @content; } @keyframes #{$name} { $browser: ''; @content; } } // 引入 @include keyframes(scale) { 100% { #{$browser}transform: scale(0.8); } } // css编译后 @-webkit-keyframes scale { -webkit-transform: scale(0.8); } @-moz-keyframes scale { -moz-transform: scale(0.8); } @-o-keyframes scale { -o-transform: scale(0.8); } @keyframes scale { transform: scale(0.8); }
我的常用sass工具库（移动端）：
@charset "UTF-8"; /*引进图片合并给一个变量(后面会用到这个变量)*/ $sprites:sprite-map("qqvip/*.png",$spacing:8px,$layout: vertical); /*转换px到rem*/ $browser-default-font-size : 20px !default; @function pxTorem($px){ @if $px == 0{$px:0px} @return $px / $browser-default-font-size * 1rem; } @function pxTo2rem($px){ @if $px == 0{$px:0px} @return $px / ($browser-default-font-size*2) * 1rem; } // 初始化变量 $browser: null; // 设置关键帧 @mixin keyframes($name) { @-webkit-keyframes #{$name} { $browser: '-webkit-'; @content; } @-moz-keyframes #{$name} { $browser: '-moz-'; @content; } @-o-keyframes #{$name} { $browser: '-o-'; @content; } @keyframes #{$name} { $browser: ''; @content; } } /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/ $media:ture; @mixin iconItem($sprites,$name,$iE6:null){ background:sprite-url($sprites) no-repeat; //获取整个雪碧图路径 @if $iE6 != null{ //null _background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8 } $image-width(sprite-file($sprites,$name)); //sprite-file 获取目标图片 $height:image-height(sprite-file($sprites,$name)); //获取目标图片 $toalWidth:image-width(sprite-path($sprites)); //获取整张图的宽度 $totalHeight:image-height(sprite-path($sprites)); //获取整张图的高度 $widthHalf:ceil($width/2); //获取宽度的一半 $heightHalf:ceil($height/2); //获取高度的一半 //sprite-position 获取目标图的位置,nth操作数组 $posX:round(nth(sprite-position($sprites,$name),1)); //获取沿x轴的位移 $posY:round(nth(sprite-position($sprites, $name), 2)); //获取沿y轴的位移 @if $media{//wap height:pxTorem($heightHalf); pxTorem($widthHalf); background-position: pxTo2rem($posX) pxTo2rem($posY); background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight); } @else{//PC height:$height; $width; background-position:sprite-position($sprites,$name); } } /*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/ @mixin timestampImg($imgUrl){ background:image-url($imgUrl) no-repeat; $image-width($imgUrl); $height:image-height($imgUrl); @if $media{ //wap pxTo2rem($width); height:pxTo2rem($height); background-size:pxTo2rem($width) pxTo2rem($height); } @else{ height:$height; $width; } } /*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/ @mixin base64Img($imgUrl){ background-image:inline-image($imgUrl); background-repeat:no-repeat; $image-width($imgUrl); $height:image-height($imgUrl); @if $media{ //wap pxTo2rem($width); height:pxTo2rem($height); background-size:pxTo2rem($width) pxTo2rem($height); } @else{ height:$height; $width; } } //圆角 @mixin boradius($size){ -webkit-border-radius:$size; -moz-border-radius:$size; -o-border-radius:$size; -ms-border-radius:$size; border-radius:$size; } %box{ -webkit-box-sizing: border-box; box-sizing: border-box; } %inlineb{display:inline-block;} %block{display:block;} //绝对居中 @mixin pscenter($width,$height){ $width; height:$height; position:absolute; left:50%; top:50%; margin:(-$height/2) 0 0 (-$width/2) } // 文字省略：单行 %text_oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // 文字省略：两行 %text_twoline { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } // 文字省略：自定义多行 @mixin elli($elli) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $elli; -webkit-box-orient: vertical; } // flex 布局 %boxflex { display: box; display: -ms-box; display: -webkit-box; display: flex; display: -ms-flexbox; display: -webkit-flex; } %flex { display: block; flex: 1; -ms-flex: 1; -webkit-flex: 1; box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; } // 清除表单样式 %input_clear { border: none; background: none; -webkit-appearance: none; -webkit-border-radius: 0; } // 固定定位条 %fixedBar { position: fixed; left: 0; right: 0; 100%; } /* ************************全局模块样式************************** */ * { -webkit-tap-highlight-color: transparent; outline: 0; } body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; } body{background:#EAEAEA} img { border: 0 none; vertical-align: top; } a img{border:0 none} i, em { font-style: normal; } ol, ul { list-style: none; } input, select, button,textarea, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; } table { border-collapse: collapse; border-spacing: 0; } a, a:visited { text-decoration: none; color: #333; } a:focus{ outline:0; } html,body{font-size:$browser-default-font-size;height:100%; } body { margin: 0 auto; min- 320px; max- 640px; background: #eaeef2; // font-size: 14px; font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; -webkit-user-select: none; user-select: none; } .g_cf:after{ display:block; content:'20'; clear:both; height:0; visibility:hidden; } input{-webkit-appearance: none;} .g_cf{ *zoom:1; *overflow:hidden } .hide{display:none}; .display{display:block}; .g_h5{height:pxTo2rem(5px);} .g_h10{height:pxTo2rem(10px);} .g_h10{height:pxTo2rem(10px);} .g_h15{height:pxTo2rem(15px);} .g_h20{height:pxTo2rem(20px);} .g_h25{height:pxTo2rem(25px);} .g_h30{height:pxTo2rem(30px);} .g_h35{height:pxTo2rem(35px)} .g_h40{height:pxTo2rem(40px);} .g_h50{height:pxTo2rem(50px)} .g_h70{height:pxTo2rem(70px)} .g_h100{height:pxTo2rem(100px)} .g_h130{height:pxTo2rem(130px)} .fs2_6{color:#666;font-size: pxTo2rem(20px)} .fs25_6{color:#666;font-size: pxTo2rem(25px)} .fs2_9{color:#999;font-size: pxTo2rem(20px)}
我的常用sass库，不用rem，用px em库：
@charset "UTF-8"; @import 'mod_border'; /*引进图片合并给一个变量(后面会用到这个变量)*/ $sprites:sprite-map("icon/*.png",$spacing:8px,$layout: vertical); /*转换px到rem*/ $browser-default-font-size : 16px !default; /***640下2倍px 转换为 1倍px**/ @function pxTo($px){ @if $px == 0{$px:0px} @return $px / 2; } /***转换为em**/ @function pxToem($px){ @if $px == 0{$px:0px} @return $px / $browser-default-font-size * 1em; } @function pxTo2em($px){ @if $px == 0{$px:0px} @return $px / ($browser-default-font-size*2) * 1em; } // 初始化变量 $browser: null; // 设置关键帧 @mixin keyframes($name) { @-webkit-keyframes #{$name} { $browser: '-webkit-'; @content; } @-moz-keyframes #{$name} { $browser: '-moz-'; @content; } @-o-keyframes #{$name} { $browser: '-o-'; @content; } @keyframes #{$name} { $browser: ''; @content; } } /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/ $media:ture; @mixin iconItem($sprites,$name,$iE6:null){ background:sprite-url($sprites) no-repeat; //获取整个雪碧图路径 @if $iE6 != null{ //null _background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8 } $image-width(sprite-file($sprites,$name)); //sprite-file 获取目标图片 $height:image-height(sprite-file($sprites,$name)); //获取目标图片 $toalWidth:image-width(sprite-path($sprites)); //获取整张图的宽度 $totalHeight:image-height(sprite-path($sprites)); //获取整张图的高度 $widthHalf:ceil($width/2); //获取宽度的一半 $heightHalf:ceil($height/2); //获取高度的一半 //sprite-position 获取目标图的位置,nth操作数组 $posX:round(nth(sprite-position($sprites,$name),1)); //获取沿x轴的位移 $posY:round(nth(sprite-position($sprites, $name), 2)); //获取沿y轴的位移 @if $media{//wap height:$heightHalf; $widthHalf; background-position: $posX/2 $posY/2; background-size:$toalWidth/2 $totalHeight/2; } @else{//PC height:$height; $width; background-position:sprite-position($sprites,$name); } } /*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/ @mixin timestampImg($imgUrl){ background:image-url($imgUrl) no-repeat; $image-width($imgUrl); $height:image-height($imgUrl); @if $media{ //wap $width/2; height:$height/2; background-size:$width/2 $height/2; } @else{ height:$height; $width; } } /*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/ @mixin base64Img($imgUrl){ background-image:inline-image($imgUrl); background-repeat:no-repeat; $image-width($imgUrl); $height:image-height($imgUrl); @if $media{ //wap $width/2; height:$height/2; background-size:$width/2 $height/2; } @else{ height:$height; $width; } } @mixin size($width, $height:false){ @if not $height { $height : $width; } $width + px; height: $height + px ; } //圆角 @mixin boradius($size){ -webkit-border-radius:$size; -moz-border-radius:$size; -o-border-radius:$size; -ms-border-radius:$size; border-radius:$size; } @mixin border-radius($size){ -webkit-border-radius:$size; -moz-border-radius:$size; -o-border-radius:$size; -ms-border-radius:$size; border-radius:$size; } %boxSize{ -webkit-box-sizing: border-box; box-sizing: border-box; } %inlineb{display:inline-block;} %block{display:block;} //绝对居中 @mixin pscenter($width,$height){ $width; height:$height; position:absolute; left:50%; top:50%; margin:(-$height/2) 0 0 (-$width/2) } // 文字省略：单行 %text_oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // 文字省略：两行 %text_twoline { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } // 文字省略：自定义多行 @mixin elli($elli) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $elli; -webkit-box-orient: vertical; } // flex 布局 %box{ display: box; display: -ms-box; display: -webkit-box; display: flex; display: -ms-flexbox; display: -webkit-flex; } %boxflex { display: box; display: -ms-box; display: -webkit-box; display: flex; display: -ms-flexbox; display: -webkit-flex; } %flex { display: block; flex: 1; -ms-flex: 1; -webkit-flex: 1; box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; } // 清除表单样式 %input_clear { border: none; background: none; -webkit-appearance: none; -webkit-border-radius: 0; } // 固定定位条 %fixedBar { position: fixed; left: 0; right: 0; 100%; } @mixin center($width, $height){ $width + px; height: $height + px ; position: absolute; left: 50%; top: 50%; margin-left: $width / (-2) + px; margin-top: $height / (-2) + px; } /* ************************全局模块样式************************** */ * { -webkit-tap-highlight-color: transparent; outline: 0; } body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; } body{background:#EAEAEA} img { border: 0 none; vertical-align: top; } a img{border:0 none} i, em { font-style: normal; } ol, ul { list-style: none; } input, select, button,textarea, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; } table { border-collapse: collapse; border-spacing: 0; } a, a:visited { text-decoration: none; color: #333; } a:focus{ outline:0; } html,body{font-size:$browser-default-font-size;height:100%; } body { margin: 0 auto; min- 320px; max- 640px; background: #fff; // font-size: 14px; font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; -webkit-user-select: none; user-select: none; } .g_cf:after{ display:block; content:'20'; clear:both; height:0; visibility:hidden; } input{-webkit-appearance: none;} .g_cf{ *zoom:1; *overflow:hidden } .hide{display:none}; .display{display:block};pxTo2em .g_h5{height:pxTo2em(5px);} .g_h10{height:pxTo2em(10px);} .g_h10{height:pxTo2em(10px);} .g_h15{height:pxTo2em(15px);} .g_h20{height:pxTo2em(20px);} .g_h25{height:pxTo2em(25px);} .g_h30{height:pxTo2em(30px);} .g_h35{height:pxTo2em(35px)} .g_h40{height:pxTo2em(40px);} .g_h50{height:pxTo2em(50px)} .g_h70{height:pxTo2em(70px)} .g_h100{height:pxTo2em(100px)} .g_h130{height:pxTo2em(130px)} .fs2_6{color:#666;font-size: pxTo2rem(20px)} .fs25_6{color:#666;font-size: pxTo2rem(25px)} .fs2_9{color:#999;font-size: pxTo2rem(20px)} .cl_666{color:#666 !important;} .red{color:red !important} .bd_top_no{border-top:none !important}
我的常用sass工具库（pc端）：
@charset "utf-8"; /*引进图片合并给一个变量(后面会用到这个变量)*/ $sprites1:sprite-map("cloud/*.png",$spacing:10px,$layout: vertical); /*转换px到rem*/ $browser-default-font-size : 20px !default; @function pxTorem($px){ @if $px == 0{$px:0px} @return $px / $browser-default-font-size * 1rem; } @function pxTo2rem($px){ @if $px == 0{$px:0px} @return $px / ($browser-default-font-size*2) * 1rem; } /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/ $media:false; @mixin iconItem($sprites,$name,$iE6:null){ background:sprite-url($sprites) no-repeat; //获取整个雪碧图路径 @if $iE6 != null{ //null _background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8 } $image-width(sprite-file($sprites,$name)); //sprite-file 获取目标图片 $height:image-height(sprite-file($sprites,$name)); //获取目标图片 $toalWidth:image-width(sprite-path($sprites)); //获取整张图的宽度 $totalHeight:image-height(sprite-path($sprites)); //获取整张图的高度 $widthHalf:ceil($width/2); //获取宽度的一半 $heightHalf:ceil($height/2); //获取高度的一半 //sprite-position 获取目标图的位置,nth操作数组 $posX:round(nth(sprite-position($sprites,$name),1)); //获取沿x轴的位移 $posY:round(nth(sprite-position($sprites, $name), 2)); //获取沿y轴的位移 @if $media{//wap height:pxTorem($heightHalf); pxTorem($widthHalf); font:$posX; font:$posY; background-position: pxTo2rem($posX) pxTo2rem($posY); background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight); } @else{//PC height:$height; $width; background-position:sprite-position($sprites,$name); } } /*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/ @mixin timestampImg($imgUrl){ background:image-url($imgUrl) no-repeat; $image-width($imgUrl); $height:image-height($imgUrl); @if $media{ //wap pxTo2rem($width); height:pxTo2rem($height); background-size:pxTo2rem($width) pxTo2rem($height); } @else{ height:$height; $width; } } /*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/ @mixin base64Img($imgUrl){ background:inline-image($imgUrl) no-repeat; $image-width($imgUrl); $height:image-height($imgUrl); @if $media{ //wap pxTo2rem($width); height:pxTo2rem($height); background-size:pxTo2rem($width) pxTo2rem($height); } @else{ height:$height; $width; } } @mixin boradius($size){ -webkit-border-radius:$size; -moz-border-radius:$size; -o-border-radius:$size; -ms-border-radius:$size; border-radius:$size; } %box{ -webkit-box-sizing: border-box; box-sizing: border-box; } %inlineb{display:inline-block;} %block{display:block;} //绝对居中 @mixin pscenter($width,$height){ $width; height:$height; position:absolute; left:50%; top:50%; margin:(-$height/2) 0 0 (-$width/2) } /*******************基础样式*******************/ /*5FAE8F6F96C59ED1 微软雅黑 '5b8b4f53'宋体*/ html,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 { padding: 0; margin: 0 } html,body{font:12px/1.5 '5FAE8F6F96C59ED1','5b8b4f53',sans-serif,arial;} img { border:0 none; } ul, ol { list-style: none } input, textarea, select, button { resize: none; font-family: inherit; font-size: inherit; font-weight: inherit; outline: none; font:12px/1.5 '5FAE8F6F96C59ED1','5b8b4f53',sans-serif,arial; } button, input[type="button"], input[type=submit], input[type=reset] { cursor:pointer; border:0 none; } input[type="text"]{ color:#ccc } select{color:#333} input[type="search"] { -webkit-appearance:textfield } /* ie6 ie7去除text产生的蓝色边框 */ input[type=submit], input[type=reset] { filter:chroma(color=#000000); } //关闭ie10里面的叉 input:-ms-clear{display:none;} a img { bord:0 none; } a{ outline:none; text-decoration:none; -webkit-tap-highlight-color:rgba(255,0,0,0); blr:expression(this.onFocus=this.blur()); } a:focus{ outline:0; } .g_cf:after{ display:block; content:'20'; clear:both; height:0; visibility:hidden; } .g_cf{ *zoom:1; overflow:hidden } .g_h5{height:5px} .g_h10{height:10px} .g_h15{height:15px} .g_h20{height:20px} .g_h30{height:30px} .g_h40{height:40px} .g_h100{height:100px}