reset.css

最新推荐文章于 2024-10-29 09:54:45 发布

只属于编码TY

最新推荐文章于 2024-10-29 09:54:45 发布

阅读量126

点赞数

分类专栏：基础类总结

基础类总结专栏收录该内容

23 篇文章

订阅专栏

pc端采用rem单位


@charset "utf-8";
body {font:12px/1 "Microsoft YaHei","SimSun","Chalkduster",helvetica,arial,"\5b8b\4f53"; background: #fff;min-width:1200px;-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;smoothing: antialiased;}
*{padding:0; margin:0;}
ol li,ul li {list-style:none;}
img{border:none;}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:normal;}
address,em,th,i{font-weight:normal; font-style:normal;}
.clearfix{*zoom:1;}
.clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
input,textarea{outline: 0; outline: none;}
input[type=submit] {
  cursor: pointer;
}
.ellipsis1 {overflow: hidden;text-overflow:ellipsis; white-space: nowrap;}
.fl{float: left;}
.fr{float: right;}
select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
-ms-appearance:none;
}
select::-ms-expand { display: none;}
/*通用*/
.mt1200 {width:1200px;min-width: 1200px;margin:0 auto;}
.wh-inherit {width:inherit; height:inherit;}
/*mt pt 上外边距*/
.mt0{margin-top:0px;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}
.mt15{margin-top:15px;}.mt20{margin-top:20px;}.mt25{margin-top:25px;}.mt30{margin-top:30px;}
.mt35{margin-top:35px;}.mt40{margin-top:40px;}.mt45{margin-top:45px;}.mt50{margin-top:50px;}
.mt55{margin-top:55px;}.mt60{margin-top:60px;}.mt65{margin-top:65px;}.mt70{margin-top:70px;}
.mt75{margin-top:75px;}.mt80{margin-top:80px;}.mt85{margin-top:85px;}.mt90{margin-top:90px;}
.mt100{margin-top:100px;}
.mt-20{margin-top:-20px;}
.pt0{padding-top:0px;}.pt5{padding-top:5px;}.pt10{padding-top:10px;}.pt15{padding-top:15px;}
.pt20{padding-top:20px;}.pt25{padding-top:25px;}.pt30{padding-top:30px;}.pt35{padding-top:35px;}
.pt40{padding-top:40px;}.pt45{padding-top:45px;}.pt50{padding-top:50px;}.pt55{padding-top:55px;}
.pt60{padding-top:60px;}.pt65{padding-top:65px;}.pt70{padding-top:70px;}.pt75{padding-top:75px;}
.pt85{padding-top:85px;}.pb20 {padding-bottom:20px;}.pr5 {padding-right: 5px;}
/*ml 左外边距*/
.ml0{margin-left:0px !important;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}
.ml15{margin-left:15px;}.ml20{margin-left:20px;}.ml25{margin-left:25px;}
.ml30{margin-left:30px;}.ml35{margin-left:35px;}.ml40{margin-left:40px;}
.ml45{margin-left:45px;}.ml50{margin-left:50px;}.ml55{margin-left:55px;}
.ml60{margin-left:60px;}.ml65{margin-left:65px;}.ml70{margin-left:70px;}
.ml75{margin-left:75px;}.ml100{margin-left:100px;}.ml110{margin-left:110px;}

.p15 {padding:15px;}.p5 {padding:5px;}.m15 {margin:15px;}.m20 {margin:20px;}.m5 {margin:5px;}

.pl0{padding-left:0px;}.pl5{padding-left:5px;}.pl10{padding-left:10px;}
.pl15{padding-left:15px;}.pl20{padding-left:20px;}.pl25{padding-left:25px;}
.pl30{padding-left:30px;}.pl35{padding-left:35px;}.pl40{padding-left:40px;}
.pl45{padding-left:45px;}.pl50{padding-left:50px;}.pl55{padding-left:55px;}
.pl60{padding-left:60px;}.pl65{padding-left:65px;}.pl70{padding-left:70px;}
.pl75{padding-left:75px;}
/*font-size*/
.ft12{font-size: 12px;}
.ft14{font-size:14px;}
.ft18{font-size: 18px;}
.ft20{font-size: 20px;}
/*元素位置属性*/
.d-block{display:block;}
.d-none{display:none;}
.d-inline{display:inline;}
.f-weight{ font-weight:bold;}
.v-middle{vertical-align: middle;}
.v-top{vertical-align: top;}
.relative{position: relative;}
.absolute{position: absolute;}
/*文本*/
.t-left{text-align:left;}.t-center{text-align:center;}.t-right{text-align:right;}





<!--less-->

// 通用公式
  .px2rem(@name, @px) {
    @{name}: @px * 1px}
// 元素外围
.w(@width){.px2rem(width,@width);}
.h(@height){.px2rem(height,@height);}
.w-h(@width,@height) {
  .px2rem(width,@width);
  .px2rem(height,@height);
}
.b-radius(@b-radius){
.px2rem(border-radius,@b-radius);
.px2rem(-webkit-border-radius,@b-radius);
.px2rem(-moz-border-radius,@b-radius);
}
// 补白
.padding(@top,@right,@bottom,@left){
  .px2rem(padding-top,@top);
  .px2rem(padding-right,@right);
  .px2rem(padding-bottom,@bottom);
  .px2rem(padding-left,@left);
}
.pl(@pl){.px2rem(padding-left,@pl);}
.pr(@pr){.px2rem(padding-right,@pr);}
.pt(@pt){.px2rem(padding-top,@pt); }
.pb(@pb){.px2rem(padding-bottom,@pb);}

// 外边距
.margin(@top,@right,@bottom,@left){
  .px2rem(margin-top,@top);
  .px2rem(margin-right,@right);
  .px2rem(margin-bottom,@bottom);
  .px2rem(margin-left,@left);
}
.ml(@ml){.px2rem(margin-left,@ml);}
.mr(@mr){.px2rem(margin-right,@mr);}
.mt(@mt){.px2rem(margin-top,@mt); }
.mb(@mb){.px2rem(margin-bottom,@mb);}

/*文本*/
.fz(@fz){.px2rem(font-size,@fz);}
.text(@fz,@color){.px2rem(font-size,@fz); color: @color;}
.t-left{text-align:left;}.t-center{text-align:center;}.t-right{text-align:right;}
.d-block{display:block;}
.d-none{display:none;}
.d-inline{display:inline;}
.d-in-block {display:inline-block;}
.f-weight{ font-weight:bold;}
.v-middle{vertical-align: middle;}
.v-top{vertical-align: top;}
.l-height(@l-height){.px2rem(line-height,@l-height)}
/*弹性盒*/
.flex{display:flex; display:-webkit-flex;display:-moz-flex;}
.flex-inline{display: inline-flex; display:-webkit-inline-flex;display:-moz-inline-flex;}
.flex-between {justify-content:space-between;-webkit-justify-content:space-between;-moz-justify-content:space-between }
.felx-around {justify-content:space-around;-webkit-justify-content:space-around;-moz-justify-content:space-around;}
.flex-start{justify-content:flex-start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;}
.flex-end{justify-content:flex-end;-webkit-justify-content:flex-end;-moz-justify-content:flex-end;}
.item-center{align-items:center;-webkit-align-items:center;-moz-align-items:center;}
.flex-center {justify-content:center;-webkit-justify-content:center;-moz-justify-content:center;}
.flex-wrap{flex-wrap: wrap;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;}
.flex1 {flex:1;-webkit-flex: 1;-moz-flex:1;}
// 通用变量
@solid:solid; @dashed:dashed;@url:'./img';

移动端使用rem

// 通用公式

.px2rem(@name, @px){

@{name}: @px / 75 * 1rem;

}

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,