移动端base.css

标签：名称   inf   pre   animation   帮助   ==   dir   black   mask   

移动端 基于flex布局 的默认样式 rest css ;

*,::before,::after {
  padding: 0;
  margin: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  
}
/*  所有元素的盒模型 */
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 14px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height:normal;
  margin: 0 auto;
  max-width: 750px;
  min-width: 320px;
  min-height: 100%;
  color: #333333;
}
/* 表单元素不继承 font-size font-family属性*/
form {
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
table {border-collapse: collapse;}
em,i {font-style: normal;}
strong {font-weight: normal;}
ol,ul {list-style: none;}
input,textarea {
  border: none;
  /*去掉默认的边框*/
  outline: none;
  resize: none;
  -webkit-appearance: none;
}
a {
  color: #333333;
  text-decoration: none;
}
/* 图片自适应 */
img {
  border: none;
  vertical-align: middle;
  height: auto;
  max-width: 100%;
  width: auto;
}
h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
  line-height:1;
}
/*清除浮动*/
.clearfix:before,.clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}
.clearfix {zoom: 1;}
/*  定位  */
.posr {position: relative;}
.posa {position: absolute;}
.posf{position: fixed;}
/* 浮动 */
.fl {float: left;}
.fr {float: right;}
/* 定位居中 */
.all_center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
/* 垂直居中   */
.y_center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
/* 水平居中 */
.x_center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

/* 文字超出省略 */
.ellipsis_2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
}

.ellipsis_1{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
    overflow: hidden;
}

/* 设置为flex布局后子元素的float、clear和vertical-align将失效 */
/* 父元素-横向排列（主轴） 左到右*/

.flex_r {
    /*定义一个伸缩盒子*/
    display: box;              
    display: -webkit-box;      
    display: -moz-box;           
    display: -ms-flexbox;   
    display: -webkit-flex;
    display: flex;
    /* 09版 */               
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    /* 12版 */
    -webkit-flex-direction: row;  
    -moz-flex-direction: row;  
    -ms-flex-direction: row;  
    -o-flex-direction: row;  
    flex-direction: row;  
}
/* 横向从右到左 */
.flex_r_back {
    /*定义一个伸缩盒子*/
    display: box;
    display: -webkit-box;
    display: -moz-box;           
    display: -ms-flexbox;  
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;

    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: end
}
/* ================================== */

/* 纵向排列（主轴）从上到下 */  
.flex_c {
    display: box;
    display: -webkit-box;
    display: -moz-box;    
    display: -ms-flexbox; 
    display: -webkit-flex;
    display: flex;   
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}

/* 主轴设置横向就是水平方向；或者设置为竖直就是垂直方向(在主轴上的对齐方式;) */
/* （定义了在主轴上的对齐方式） */
.f_jc_s{
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start
}
.f_jc_c{
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}
/* 两端对齐 */
.f_jc_b{
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
/* 每个项目之间距离都相等; 只有12版标准版;*/
.f_jc_a{
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    justify-content: space-around;
}
.f_jc_e{
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
/* ================================= */
/* (定义了项目在交叉轴上的对齐方式) */
.f_ai_s{
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.f_ai_c{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
/*  基线对齐 */
.f_ai_b{
     -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}
.f_ai_e{
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
/* 上下对齐铺满 */
.f_ai_s{
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch ;
}
/* ============================*/
/*多跟主轴的对齐方式;*/
.flex_ac{
    -webkit-align-content: center;
    -moz-align-content: center;
    -ms-align-content: center;
    -o-align-content: center;
    align-content: center;
}
/* 允许换行 */
.flex_wrap{
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*================================================== */
.flex1 {
    -webkit-flex: 1;   
    -ms-flex: 1;       
    flex:1;            
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}
.flex2 {
    -webkit-flex: 2;   
    -ms-flex: 2;    
    flex:2;            
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
}
/* 单个属性和其他项目的对齐方式 */
.flex_self{
    -webkit-align-self:flex-end;
    -moz-align-self:flex-end;
    -ms-align-self: flex-end;
    -o-align-self:flex-end;
    align-self: flex-end;
}

/*  盒子模型 */
.box_border{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.box_content{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    left: 0px;
    top: 0px;
}
/* 基础样式类 end  */

/* 公共样式类 start */
.mauto{margin-left:auto;margin-right:auto;}
.main1200{width:1200px;margin-left:auto;margin-right:auto;}
.main1170{width: 1170px;margin-left: auto;margin-right: auto;}

.w100{width:100%;}
.w50{width: 50%;}
.w33{width: 33.3%}
.w25{width: 25%;}
.w25{width: 20%;}
.w15{width: 15%;}
.w10{width: 10%;}

.over_h{overflow:hidden;}
.over_a{overflow:auto;}
.over_x_a{overflow-x:auto;}
.over_x_h{overflow-x:hidden;}
.over_y_a{overflow-y:auto;}
.over_y_h{overflow-y:hidden;}

.dis_b{display:block;}
.dis_n{display:none;}
.dis_i{display:inline-block;}

.fw400{font-weight:400;}
.fw500{font-weight:500;}
.fw600{font-weight:600;}
.fw_b{font-weight: bold;}

/*贯穿线*/
.td_line{text-decoration:line-through;}
/*文本下的一条线*/
.td_under{text-decoration:underline;}

/*上划线*/
.td_over{text-decoration:overline;}

/*设置线的颜色*/
.td_color_red{text-decoration-color:red;}

/*下划线设置为波浪线*/
.td_style_wavy{text-decoration-style:wavy;}

/*把此元素放置在父元素的中部。*/
.ver_m{vertical-align:middle;}

/*元素放置在父元素的基线上*/
.ver_b{vertical-align:baseline;}

/*垂直对齐文本的下标。*/
.ver_s{vertical-align:sub;}

/*垂直对齐文本的上标*/
.ver_super{vertical-align:super;}

/*把元素的顶端与行中最高元素的顶端对齐*/
.ver_top{vertical-align:top;}

/*把元素的顶端与父元素字体的顶端对齐*/
.ver_text_top{vertical-align:text-top;}

/*手形*/
.cur_p{cursor:pointer;}

/*光标呈为十字线*/
.cur_c{cursor:crosshair;}

/*此光标指示某对象可被移动*/
.cur_m{cursor:move;}

/*指示文本*/
.cur_t{cursor:text;}

/*此光标指示程序正忙*/
.cur_wait{cursor:wait;}

/*此光标指示可用的帮助（通常是一个问号或一个气球)*/
.cur_help{cursor:help;}

.ti_2{text-indent:2em;}

.tc{text-align:center;}
.tl{text-align:left;}
.tr{text-align:right;}

/*内容透明*/
.opacity6{opacity:0.6;filter:alpha(opacity=60);}

/*设置字符间距 字母和汉字*/
.t_ls10{letter-spacing:10px;}
/*保留文字中的空白*/
.t_ws_p{white-space:pre;}



/* 背景色 */
.bg_333{background-color:#333;}
.bg_666{background-color:#666;}
.bg_999{background-color:#999;}
.bg_000{background-color: #000;}
.bg_fff{background-color: #ffffff;}
.bg_black{background-color:black;}
.bg_white{background-color:white;}
.bg_red{background-color:red;}
.bg_green{background-color:green;}
.bg_blue{background-color: blue;}
.bg_deeppink{background-color:deeppink;}
.bg_yellow{background-color: yellow;}

/*  颜色 */
.cr_333{color:#333;}
.cr_666{color:#666;}
.cr_999{color:#999;}
.cr_fff{color: #ffffff;}
.cr_000{color: #000000;}
.cr_white{color:white;}
.cr_black{color:black;}
.cr_red{color:red;}
.cr_green{color: green;}
.cr_blue{color: blue;}
.cr_pink{color: pink;}
.cr_yellow{color: yellow;}


/* 边框 */
.br_1_333{border: 1px solid #333;}
.br_1_666{border: 1px solid #666;}
.br_1_999{border: 1px solid #999;}
.br_1_000{border: 1px solid #000000;}

.br_t_1_333{border-top: 1px solid #333;}
.br_t_1_666{border-top: 1px solid #666;}
.br_t_1_999{border-top: 1px solid #999;}
.br_t_1_000{border-top: 1px solid #000000;}

.br_b_1_333{border-bottom: 1px solid #333;}
.br_b_1_666{border-bottom: 1px solid #666;}
.br_b_1_999{border-bottom: 1px solid #999;}
.br_b_1_000{border-bottom: 1px solid #000000;}

.br_l_1_333{border-left: 1px solid #333;}
.br_l_1_666{border-left: 1px solid #666;}
.br_l_1_999{border-left: 1px solid #999;}
.br_l_1_000{border-left: 1px solid #000000;}

.br_r_1_333{border-right: 1px solid #333;}
.br_r_1_666{border-right: 1px solid #666;}
.br_r_1_999{border-right: 1px solid #999;}
.br_r_1_000{border-right: 1px solid #000000;}

/* 圆角 */
.brs_2{border-radius:2px;}
.brs_3{border-radius:3px;}
.brs_4{border-radius:4px;}
.brs_5{border-radius:5px;}
.brs_6{border-radius:6px;}
.brs_7{border-radius:7px;}
.brs_8{border-radius:8px;}
.brs_9{border-radius:9px;}
.brs_10{border-radius:10px;}
.brs_15{border-radius:15px;}
.brs_20{border-radius:20px;}
.brs_25{border-radius:25px;}
.brs_30{border-radius:30px;}
.brs_40{border-radius:40px;}
.brs_50{border-radius:50px;}
.brs50{border-radius:50%;}
.brs_max{border-radius:90000px}

/* 背景渐变 */
/* 镜像渐变 */
.radial_gradient{
    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, green, blue);   /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, green, blue);   /* Firefox 3.6 - 15 */
    background: radial-gradient(red, green, blue);  /* 标准的语法（必须放在最后） */
}
/* 线性背景渐变 */
.linear_gradient{
    background-image: -webkit-linear-gradient(to bottom, #e6e6e6, #fff);
    background-image: -o-linear-gradient(to bottom, #e6e6e6, #fff);
    background-image: linear-gradient(to bottom, #e6e6e6, #fff);
}
/* 动画 */
@keyframes mydeom{
  from {left: 0px;}
  to{left:500px;}
}
/* 使用自定义动画  添加动画 元素名称 */
.use_keyframes {
  position: relative;
  animation: mydeom 5s infinite;
  -webkit-animation: mydeom 5s infinite;
}

/* 过渡 */
.transition_attr {
  transition: width 2s;
  -ms-transition:width 2s;
  -webkit-transition: width 2s;    /* Safari */
}

/* 2d */
/* 放大1.8倍 */
.scale_18 {
  transform: scale(1.8, 1.8);
  -ms-transform: scale(1.8, 1.8);
  -webkit-transform: scale(1.8, 1.8);
}

/* 旋转180度 */
.rotate_180deg {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

/* 沿着 X 轴移动元素。*/
.translateX_100px {
  transform: translateX(100px);    /*沿着 X 轴移动元素。*/
  -ms-transform: translateX(100px);
  -webkit-transform: translateX(100px);
}
.translateY_100px {
  transform: translateY(100px);    /*沿着 X 轴移动元素。*/
  -ms-transform: translateY(100px);
  -webkit-transform: translateY(100px);
}

/* 计算函数 */
.cale_function{
  width: cale(100% - 100px);
}

/*  字体  */
.fs10{font-size:10px}
.fs11{font-size:11px}
.fs12{font-size:12px}
.fs13{font-size:13px}
.fs14{font-size:14px}
.fs15{font-size:15px}
.fs16{font-size:16px}
.fs17{font-size:17px}
.fs18{font-size:18px}
.fs19{font-size:19px}
.fs20{font-size:20px}
.fs21{font-size:21px}
.fs22{font-size:22px}
.fs23{font-size:23px}
.fs24{font-size:24px}
.fs25{font-size:25px}
.fs26{font-size:26px}
.fs27{font-size:27px}
.fs28{font-size:28px}
.fs29{font-size:29px}
.fs30{font-size:30px}
.fs31{font-size:31px}
.fs32{font-size:32px}
.fs33{font-size:33px}
.fs34{font-size:34px}
.fs35{font-size:35px}
.fs36{font-size:36px}
.fs37{font-size:37px}
.fs38{font-size:38px}
.fs39{font-size:39px}
.fs40{font-size:40px}
.fs41{font-size:41px}
.fs42{font-size:42px}
.fs43{font-size:43px}
.fs44{font-size:44px}
.fs45{font-size:45px}
.fs46{font-size:46px}
.fs47{font-size:47px}
.fs48{font-size:48px}
.fs49{font-size:49px}
.fs50{font-size:50px}
.fs51{font-size:51px}
.fs52{font-size:52px}
.fs53{font-size:53px}
.fs54{font-size:54px}
.fs55{font-size:55px}
.fs56{font-size:56px}
.fs57{font-size:57px}
.fs58{font-size:58px}
.fs59{font-size:59px}
.fs60{font-size:60px}
.fs61{font-size:61px}
.fs62{font-size:62px}
.fs63{font-size:63px}
.fs64{font-size:64px}
.fs65{font-size:65px}
.fs66{font-size:66px}
.fs67{font-size:67px}
.fs68{font-size:68px}
.fs69{font-size:69px}
.fs70{font-size:70px}
.fs71{font-size:71px}
.fs72{font-size:72px}
.fs73{font-size:73px}
.fs74{font-size:74px}
.fs75{font-size:75px}
.fs76{font-size:76px}
.fs77{font-size:77px}
.fs78{font-size:78px}
.fs79{font-size:79px}
.fs80{font-size:80px}
/* margin 外边距 */
.mt1{margin-top:1px}
.mt2{margin-top:2px}
.mt3{margin-top:3px}
.mt4{margin-top:4px}
.mt5{margin-top:5px}
.mt6{margin-top:6px}
.mt7{margin-top:7px}
.mt8{margin-top:8px}
.mt9{margin-top:9px}
.mt10{margin-top:10px}
.mt11{margin-top:11px}
.mt12{margin-top:12px}
.mt13{margin-top:13px}
.mt14{margin-top:14px}
.mt15{margin-top:15px}
.mt16{margin-top:16px}
.mt17{margin-top:17px}
.mt18{margin-top:18px}
.mt19{margin-top:19px}
.mt20{margin-top:20px}
.mt21{margin-top:21px}
.mt22{margin-top:22px}
.mt23{margin-top:23px}
.mt24{margin-top:24px}
.mt25{margin-top:25px}
.mt26{margin-top:26px}
.mt27{margin-top:27px}
.mt28{margin-top:28px}
.mt29{margin-top:29px}
.mt30{margin-top:30px}
.mt31{margin-top:31px}
.mt32{margin-top:32px}
.mt33{margin-top:33px}
.mt34{margin-top:34px}
.mt35{margin-top:35px}
.mt36{margin-top:36px}
.mt37{margin-top:37px}
.mt38{margin-top:38px}
.mt39{margin-top:39px}
.mt40{margin-top:40px}
.mt41{margin-top:41px}
.mt42{margin-top:42px}
.mt43{margin-top:43px}
.mt44{margin-top:44px}
.mt45{margin-top:45px}
.mt46{margin-top:46px}
.mt47{margin-top:47px}
.mt48{margin-top:48px}
.mt49{margin-top:49px}
.mt50{margin-top:50px}
.mt51{margin-top:51px}
.mt52{margin-top:52px}
.mt53{margin-top:53px}
.mt54{margin-top:54px}
.mt55{margin-top:55px}
.mt56{margin-top:56px}
.mt57{margin-top:57px}
.mt58{margin-top:58px}
.mt59{margin-top:59px}
.mt60{margin-top:60px}
.mt61{margin-top:61px}
.mt62{margin-top:62px}
.mt63{margin-top:63px}
.mt64{margin-top:64px}
.mt65{margin-top:65px}
.mt66{margin-top:66px}
.mt67{margin-top:67px}
.mt68{margin-top:68px}
.mt69{margin-top:69px}
.mt70{margin-top:70px}
.mt71{margin-top:71px}
.mt72{margin-top:72px}
.mt73{margin-top:73px}
.mt74{margin-top:74px}
.mt75{margin-top:75px}
.mt76{margin-top:76px}
.mt77{margin-top:77px}
.mt78{margin-top:78px}
.mt79{margin-top:79px}
.mt80{margin-top:80px}
.mt81{margin-top:81px}
.mt82{margin-top:82px}
.mt83{margin-top:83px}
.mt84{margin-top:84px}
.mt85{margin-top:85px}
.mt86{margin-top:86px}
.mt87{margin-top:87px}
.mt88{margin-top:88px}
.mt89{margin-top:89px}
.mt90{margin-top:90px}
.mt91{margin-top:91px}
.mt92{margin-top:92px}
.mt93{margin-top:93px}
.mt94{margin-top:94px}
.mt95{margin-top:95px}
.mt96{margin-top:96px}
.mt97{margin-top:97px}
.mt98{margin-top:98px}
.mt99{margin-top:99px}
.mt100{margin-top:100px}
.mb1{margin-bottom:1px}
.mb2{margin-bottom:2px}
.mb3{margin-bottom:3px}
.mb4{margin-bottom:4px}
.mb5{margin-bottom:5px}
.mb6{margin-bottom:6px}
.mb7{margin-bottom:7px}
.mb8{margin-bottom:8px}
.mb9{margin-bottom:9px}
.mb10{margin-bottom:10px}
.mb11{margin-bottom:11px}
.mb12{margin-bottom:12px}
.mb13{margin-bottom:13px}
.mb14{margin-bottom:14px}
.mb15{margin-bottom:15px}
.mb16{margin-bottom:16px}
.mb17{margin-bottom:17px}
.mb18{margin-bottom:18px}
.mb19{margin-bottom:19px}
.mb20{margin-bottom:20px}
.mb21{margin-bottom:21px}
.mb22{margin-bottom:22px}
.mb23{margin-bottom:23px}
.mb24{margin-bottom:24px}
.mb25{margin-bottom:25px}
.mb26{margin-bottom:26px}
.mb27{margin-bottom:27px}
.mb28{margin-bottom:28px}
.mb29{margin-bottom:29px}
.mb30{margin-bottom:30px}
.mb31{margin-bottom:31px}
.mb32{margin-bottom:32px}
.mb33{margin-bottom:33px}
.mb34{margin-bottom:34px}
.mb35{margin-bottom:35px}
.mb36{margin-bottom:36px}
.mb37{margin-bottom:37px}
.mb38{margin-bottom:38px}
.mb39{margin-bottom:39px}
.mb40{margin-bottom:40px}
.mb41{margin-bottom:41px}
.mb42{margin-bottom:42px}
.mb43{margin-bottom:43px}
.mb44{margin-bottom:44px}
.mb45{margin-bottom:45px}
.mb46{margin-bottom:46px}
.mb47{margin-bottom:47px}
.mb48{margin-bottom:48px}
.mb49{margin-bottom:49px}
.mb50{margin-bottom:50px}
.mb51{margin-bottom:51px}
.mb52{margin-bottom:52px}
.mb53{margin-bottom:53px}
.mb54{margin-bottom:54px}
.mb55{margin-bottom:55px}
.mb56{margin-bottom:56px}
.mb57{margin-bottom:57px}
.mb58{margin-bottom:58px}
.mb59{margin-bottom:59px}
.mb60{margin-bottom:60px}
.mb61{margin-bottom:61px}
.mb62{margin-bottom:62px}
.mb63{margin-bottom:63px}
.mb64{margin-bottom:64px}
.mb65{margin-bottom:65px}
.mb66{margin-bottom:66px}
.mb67{margin-bottom:67px}
.mb68{margin-bottom:68px}
.mb69{margin-bottom:69px}
.mb70{margin-bottom:70px}
.mb71{margin-bottom:71px}
.mb72{margin-bottom:72px}
.mb73{margin-bottom:73px}
.mb74{margin-bottom:74px}
.mb75{margin-bottom:75px}
.mb76{margin-bottom:76px}
.mb77{margin-bottom:77px}
.mb78{margin-bottom:78px}
.mb79{margin-bottom:79px}
.mb80{margin-bottom:80px}
.mb81{margin-bottom:81px}
.mb82{margin-bottom:82px}
.mb83{margin-bottom:83px}
.mb84{margin-bottom:84px}
.mb85{margin-bottom:85px}
.mb86{margin-bottom:86px}
.mb87{margin-bottom:87px}
.mb88{margin-bottom:88px}
.mb89{margin-bottom:89px}
.mb90{margin-bottom:90px}
.mb91{margin-bottom:91px}
.mb92{margin-bottom:92px}
.mb93{margin-bottom:93px}
.mb94{margin-bottom:94px}
.mb95{margin-bottom:95px}
.mb96{margin-bottom:96px}
.mb97{margin-bottom:97px}
.mb98{margin-bottom:98px}
.mb99{margin-bottom:99px}
.mb100{margin-bottom:100px}
.ml1{margin-left:1px}
.ml2{margin-left:2px}
.ml3{margin-left:3px}
.ml4{margin-left:4px}
.ml5{margin-left:5px}
.ml6{margin-left:6px}
.ml7{margin-left:7px}
.ml8{margin-left:8px}
.ml9{margin-left:9px}
.ml10{margin-left:10px}
.ml11{margin-left:11px}
.ml12{margin-left:12px}
.ml13{margin-left:13px}
.ml14{margin-left:14px}
.ml15{margin-left:15px}
.ml16{margin-left:16px}
.ml17{margin-left:17px}
.ml18{margin-left:18px}
.ml19{margin-left:19px}
.ml20{margin-left:20px}
.ml21{margin-left:21px}
.ml22{margin-left:22px}
.ml23{margin-left:23px}
.ml24{margin-left:24px}
.ml25{margin-left:25px}
.ml26{margin-left:26px}
.ml27{margin-left:27px}
.ml28{margin-left:28px}
.ml29{margin-left:29px}
.ml30{margin-left:30px}
.ml31{margin-left:31px}
.ml32{margin-left:32px}
.ml33{margin-left:33px}
.ml34{margin-left:34px}
.ml35{margin-left:35px}
.ml36{margin-left:36px}
.ml37{margin-left:37px}
.ml38{margin-left:38px}
.ml39{margin-left:39px}
.ml40{margin-left:40px}
.ml41{margin-left:41px}
.ml42{margin-left:42px}
.ml43{margin-left:43px}
.ml44{margin-left:44px}
.ml45{margin-left:45px}
.ml46{margin-left:46px}
.ml47{margin-left:47px}
.ml48{margin-left:48px}
.ml49{margin-left:49px}
.ml50{margin-left:50px}
.ml51{margin-left:51px}
.ml52{margin-left:52px}
.ml53{margin-left:53px}
.ml54{margin-left:54px}
.ml55{margin-left:55px}
.ml56{margin-left:56px}
.ml57{margin-left:57px}
.ml58{margin-left:58px}
.ml59{margin-left:59px}
.ml60{margin-left:60px}
.ml61{margin-left:61px}
.ml62{margin-left:62px}
.ml63{margin-left:63px}
.ml64{margin-left:64px}
.ml65{margin-left:65px}
.ml66{margin-left:66px}
.ml67{margin-left:67px}
.ml68{margin-left:68px}
.ml69{margin-left:69px}
.ml70{margin-left:70px}
.ml71{margin-left:71px}
.ml72{margin-left:72px}
.ml73{margin-left:73px}
.ml74{margin-left:74px}
.ml75{margin-left:75px}
.ml76{margin-left:76px}
.ml77{margin-left:77px}
.ml78{margin-left:78px}
.ml79{margin-left:79px}
.ml80{margin-left:80px}
.ml81{margin-left:81px}
.ml82{margin-left:82px}
.ml83{margin-left:83px}
.ml84{margin-left:84px}
.ml85{margin-left:85px}
.ml86{margin-left:86px}
.ml87{margin-left:87px}
.ml88{margin-left:88px}
.ml89{margin-left:89px}
.ml90{margin-left:90px}
.ml91{margin-left:91px}
.ml92{margin-left:92px}
.ml93{margin-left:93px}
.ml94{margin-left:94px}
.ml95{margin-left:95px}
.ml96{margin-left:96px}
.ml97{margin-left:97px}
.ml98{margin-left:98px}
.ml99{margin-left:99px}
.ml100{margin-left:100px}
.mr1{margin-right:1px}
.mr2{margin-right:2px}
.mr3{margin-right:3px}
.mr4{margin-right:4px}
.mr5{margin-right:5px}
.mr6{margin-right:6px}
.mr7{margin-right:7px}
.mr8{margin-right:8px}
.mr9{margin-right:9px}
.mr10{margin-right:10px}
.mr11{margin-right:11px}
.mr12{margin-right:12px}
.mr13{margin-right:13px}
.mr14{margin-right:14px}
.mr15{margin-right:15px}
.mr16{margin-right:16px}
.mr17{margin-right:17px}
.mr18{margin-right:18px}
.mr19{margin-right:19px}
.mr20{margin-right:20px}
.mr21{margin-right:21px}
.mr22{margin-right:22px}
.mr23{margin-right:23px}
.mr24{margin-right:24px}
.mr25{margin-right:25px}
.mr26{margin-right:26px}
.mr27{margin-right:27px}
.mr28{margin-right:28px}
.mr29{margin-right:29px}
.mr30{margin-right:30px}
.mr31{margin-right:31px}
.mr32{margin-right:32px}
.mr33{margin-right:33px}
.mr34{margin-right:34px}
.mr35{margin-right:35px}
.mr36{margin-right:36px}
.mr37{margin-right:37px}
.mr38{margin-right:38px}
.mr39{margin-right:39px}
.mr40{margin-right:40px}
.mr41{margin-right:41px}
.mr42{margin-right:42px}
.mr43{margin-right:43px}
.mr44{margin-right:44px}
.mr45{margin-right:45px}
.mr46{margin-right:46px}
.mr47{margin-right:47px}
.mr48{margin-right:48px}
.mr49{margin-right:49px}
.mr50{margin-right:50px}
.mr51{margin-right:51px}
.mr52{margin-right:52px}
.mr53{margin-right:53px}
.mr54{margin-right:54px}
.mr55{margin-right:55px}
.mr56{margin-right:56px}
.mr57{margin-right:57px}
.mr58{margin-right:58px}
.mr59{margin-right:59px}
.mr60{margin-right:60px}
.mr61{margin-right:61px}
.mr62{margin-right:62px}
.mr63{margin-right:63px}
.mr64{margin-right:64px}
.mr65{margin-right:65px}
.mr66{margin-right:66px}
.mr67{margin-right:67px}
.mr68{margin-right:68px}
.mr69{margin-right:69px}
.mr70{margin-right:70px}
.mr71{margin-right:71px}
.mr72{margin-right:72px}
.mr73{margin-right:73px}
.mr74{margin-right:74px}
.mr75{margin-right:75px}
.mr76{margin-right:76px}
.mr77{margin-right:77px}
.mr78{margin-right:78px}
.mr79{margin-right:79px}
.mr80{margin-right:80px}
.mr81{margin-right:81px}
.mr82{margin-right:82px}
.mr83{margin-right:83px}
.mr84{margin-right:84px}
.mr85{margin-right:85px}
.mr86{margin-right:86px}
.mr87{margin-right:87px}
.mr88{margin-right:88px}
.mr89{margin-right:89px}
.mr90{margin-right:90px}
.mr91{margin-right:91px}
.mr92{margin-right:92px}
.mr93{margin-right:93px}
.mr94{margin-right:94px}
.mr95{margin-right:95px}
.mr96{margin-right:96px}
.mr97{margin-right:97px}
.mr98{margin-right:98px}
.mr99{margin-right:99px}
.mr100{margin-right:100px}
.pt1{padding-top:1px}
.pt2{padding-top:2px}
.pt3{padding-top:3px}
.pt4{padding-top:4px}
.pt5{padding-top:5px}
.pt6{padding-top:6px}
.pt7{padding-top:7px}
.pt8{padding-top:8px}
.pt9{padding-top:9px}
.pt10{padding-top:10px}
.pt11{padding-top:11px}
.pt12{padding-top:12px}
.pt13{padding-top:13px}
.pt14{padding-top:14px}
.pt15{padding-top:15px}
.pt16{padding-top:16px}
.pt17{padding-top:17px}
.pt18{padding-top:18px}
.pt19{padding-top:19px}
.pt20{padding-top:20px}
.pt21{padding-top:21px}
.pt22{padding-top:22px}
.pt23{padding-top:23px}
.pt24{padding-top:24px}
.pt25{padding-top:25px}
.pt26{padding-top:26px}
.pt27{padding-top:27px}
.pt28{padding-top:28px}
.pt29{padding-top:29px}
.pt30{padding-top:30px}
.pt31{padding-top:31px}
.pt32{padding-top:32px}
.pt33{padding-top:33px}
.pt34{padding-top:34px}
.pt35{padding-top:35px}
.pt36{padding-top:36px}
.pt37{padding-top:37px}
.pt38{padding-top:38px}
.pt39{padding-top:39px}
.pt40{padding-top:40px}
.pt41{padding-top:41px}
.pt42{padding-top:42px}
.pt43{padding-top:43px}
.pt44{padding-top:44px}
.pt45{padding-top:45px}
.pt46{padding-top:46px}
.pt47{padding-top:47px}
.pt48{padding-top:48px}
.pt49{padding-top:49px}
.pt50{padding-top:50px}
.pt51{padding-top:51px}
.pt52{padding-top:52px}
.pt53{padding-top:53px}
.pt54{padding-top:54px}
.pt55{padding-top:55px}
.pt56{padding-top:56px}
.pt57{padding-top:57px}
.pt58{padding-top:58px}
.pt59{padding-top:59px}
.pt60{padding-top:60px}
.pt61{padding-top:61px}
.pt62{padding-top:62px}
.pt63{padding-top:63px}
.pt64{padding-top:64px}
.pt65{padding-top:65px}
.pt66{padding-top:66px}
.pt67{padding-top:67px}
.pt68{padding-top:68px}
.pt69{padding-top:69px}
.pt70{padding-top:70px}
.pt71{padding-top:71px}
.pt72{padding-top:72px}
.pt73{padding-top:73px}
.pt74{padding-top:74px}
.pt75{padding-top:75px}
.pt76{padding-top:76px}
.pt77{padding-top:77px}
.pt78{padding-top:78px}
.pt79{padding-top:79px}
.pt80{padding-top:80px}
.pt81{padding-top:81px}
.pt82{padding-top:82px}
.pt83{padding-top:83px}
.pt84{padding-top:84px}
.pt85{padding-top:85px}
.pt86{padding-top:86px}
.pt87{padding-top:87px}
.pt88{padding-top:88px}
.pt89{padding-top:89px}
.pt90{padding-top:90px}
.pt91{padding-top:91px}
.pt92{padding-top:92px}
.pt93{padding-top:93px}
.pt94{padding-top:94px}
.pt95{padding-top:95px}
.pt96{padding-top:96px}
.pt97{padding-top:97px}
.pt98{padding-top:98px}
.pt99{padding-top:99px}
.pt100{padding-top:100px}
.pb1{padding-bottom:1px}
.pb2{padding-bottom:2px}
.pb3{padding-bottom:3px}
.pb4{padding-bottom:4px}
.pb5{padding-bottom:5px}
.pb6{padding-bottom:6px}
.pb7{padding-bottom:7px}
.pb8{padding-bottom:8px}
.pb9{padding-bottom:9px}
.pb10{padding-bottom:10px}
.pb11{padding-bottom:11px}
.pb12{padding-bottom:12px}
.pb13{padding-bottom:13px}
.pb14{padding-bottom:14px}
.pb15{padding-bottom:15px}
.pb16{padding-bottom:16px}
.pb17{padding-bottom:17px}
.pb18{padding-bottom:18px}
.pb19{padding-bottom:19px}
.pb20{padding-bottom:20px}
.pb21{padding-bottom:21px}
.pb22{padding-bottom:22px}
.pb23{padding-bottom:23px}
.pb24{padding-bottom:24px}
.pb25{padding-bottom:25px}
.pb26{padding-bottom:26px}
.pb27{padding-bottom:27px}
.pb28{padding-bottom:28px}
.pb29{padding-bottom:29px}
.pb30{padding-bottom:30px}
.pb31{padding-bottom:31px}
.pb32{padding-bottom:32px}
.pb33{padding-bottom:33px}
.pb34{padding-bottom:34px}
.pb35{padding-bottom:35px}
.pb36{padding-bottom:36px}
.pb37{padding-bottom:37px}
.pb38{padding-bottom:38px}
.pb39{padding-bottom:39px}
.pb40{padding-bottom:40px}
.pb41{padding-bottom:41px}
.pb42{padding-bottom:42px}
.pb43{padding-bottom:43px}
.pb44{padding-bottom:44px}
.pb45{padding-bottom:45px}
.pb46{padding-bottom:46px}
.pb47{padding-bottom:47px}
.pb48{padding-bottom:48px}
.pb49{padding-bottom:49px}
.pb50{padding-bottom:50px}
.pb51{padding-bottom:51px}
.pb52{padding-bottom:52px}
.pb53{padding-bottom:53px}
.pb54{padding-bottom:54px}
.pb55{padding-bottom:55px}
.pb56{padding-bottom:56px}
.pb57{padding-bottom:57px}
.pb58{padding-bottom:58px}
.pb59{padding-bottom:59px}
.pb60{padding-bottom:60px}
.pb61{padding-bottom:61px}
.pb62{padding-bottom:62px}
.pb63{padding-bottom:63px}
.pb64{padding-bottom:64px}
.pb65{padding-bottom:65px}
.pb66{padding-bottom:66px}
.pb67{padding-bottom:67px}
.pb68{padding-bottom:68px}
.pb69{padding-bottom:69px}
.pb70{padding-bottom:70px}
.pb71{padding-bottom:71px}
.pb72{padding-bottom:72px}
.pb73{padding-bottom:73px}
.pb74{padding-bottom:74px}
.pb75{padding-bottom:75px}
.pb76{padding-bottom:76px}
.pb77{padding-bottom:77px}
.pb78{padding-bottom:78px}
.pb79{padding-bottom:79px}
.pb80{padding-bottom:80px}
.pb81{padding-bottom:81px}
.pb82{padding-bottom:82px}
.pb83{padding-bottom:83px}
.pb84{padding-bottom:84px}
.pb85{padding-bottom:85px}
.pb86{padding-bottom:86px}
.pb87{padding-bottom:87px}
.pb88{padding-bottom:88px}
.pb89{padding-bottom:89px}
.pb90{padding-bottom:90px}
.pb91{padding-bottom:91px}
.pb92{padding-bottom:92px}
.pb93{padding-bottom:93px}
.pb94{padding-bottom:94px}
.pb95{padding-bottom:95px}
.pb96{padding-bottom:96px}
.pb97{padding-bottom:97px}
.pb98{padding-bottom:98px}
.pb99{padding-bottom:99px}
.pb100{padding-bottom:100px}
.pl1{padding-left:1px}
.pl2{padding-left:2px}
.pl3{padding-left:3px}
.pl4{padding-left:4px}
.pl5{padding-left:5px}
.pl6{padding-left:6px}
.pl7{padding-left:7px}
.pl8{padding-left:8px}
.pl9{padding-left:9px}
.pl10{padding-left:10px}
.pl11{padding-left:11px}
.pl12{padding-left:12px}
.pl13{padding-left:13px}
.pl14{padding-left:14px}
.pl15{padding-left:15px}
.pl16{padding-left:16px}
.pl17{padding-left:17px}
.pl18{padding-left:18px}
.pl19{padding-left:19px}
.pl20{padding-left:20px}
.pl21{padding-left:21px}
.pl22{padding-left:22px}
.pl23{padding-left:23px}
.pl24{padding-left:24px}
.pl25{padding-left:25px}
.pl26{padding-left:26px}
.pl27{padding-left:27px}
.pl28{padding-left:28px}
.pl29{padding-left:29px}
.pl30{padding-left:30px}
.pl31{padding-left:31px}
.pl32{padding-left:32px}
.pl33{padding-left:33px}
.pl34{padding-left:34px}
.pl35{padding-left:35px}
.pl36{padding-left:36px}
.pl37{padding-left:37px}
.pl38{padding-left:38px}
.pl39{padding-left:39px}
.pl40{padding-left:40px}
.pl41{padding-left:41px}
.pl42{padding-left:42px}
.pl43{padding-left:43px}
.pl44{padding-left:44px}
.pl45{padding-left:45px}
.pl46{padding-left:46px}
.pl47{padding-left:47px}
.pl48{padding-left:48px}
.pl49{padding-left:49px}
.pl50{padding-left:50px}
.pl51{padding-left:51px}
.pl52{padding-left:52px}
.pl53{padding-left:53px}
.pl54{padding-left:54px}
.pl55{padding-left:55px}
.pl56{padding-left:56px}
.pl57{padding-left:57px}
.pl58{padding-left:58px}
.pl59{padding-left:59px}
.pl60{padding-left:60px}
.pl61{padding-left:61px}
.pl62{padding-left:62px}
.pl63{padding-left:63px}
.pl64{padding-left:64px}
.pl65{padding-left:65px}
.pl66{padding-left:66px}
.pl67{padding-left:67px}
.pl68{padding-left:68px}
.pl69{padding-left:69px}
.pl70{padding-left:70px}
.pl71{padding-left:71px}
.pl72{padding-left:72px}
.pl73{padding-left:73px}
.pl74{padding-left:74px}
.pl75{padding-left:75px}
.pl76{padding-left:76px}
.pl77{padding-left:77px}
.pl78{padding-left:78px}
.pl79{padding-left:79px}
.pl80{padding-left:80px}
.pl81{padding-left:81px}
.pl82{padding-left:82px}
.pl83{padding-left:83px}
.pl84{padding-left:84px}
.pl85{padding-left:85px}
.pl86{padding-left:86px}
.pl87{padding-left:87px}
.pl88{padding-left:88px}
.pl89{padding-left:89px}
.pl90{padding-left:90px}
.pl91{padding-left:91px}
.pl92{padding-left:92px}
.pl93{padding-left:93px}
.pl94{padding-left:94px}
.pl95{padding-left:95px}
.pl96{padding-left:96px}
.pl97{padding-left:97px}
.pl98{padding-left:98px}
.pl99{padding-left:99px}
.pl100{padding-left:100px}
.pr1{padding-right:1px}
.pr2{padding-right:2px}
.pr3{padding-right:3px}
.pr4{padding-right:4px}
.pr5{padding-right:5px}
.pr6{padding-right:6px}
.pr7{padding-right:7px}
.pr8{padding-right:8px}
.pr9{padding-right:9px}
.pr10{padding-right:10px}
.pr11{padding-right:11px}
.pr12{padding-right:12px}
.pr13{padding-right:13px}
.pr14{padding-right:14px}
.pr15{padding-right:15px}
.pr16{padding-right:16px}
.pr17{padding-right:17px}
.pr18{padding-right:18px}
.pr19{padding-right:19px}
.pr20{padding-right:20px}
.pr21{padding-right:21px}
.pr22{padding-right:22px}
.pr23{padding-right:23px}
.pr24{padding-right:24px}
.pr25{padding-right:25px}
.pr26{padding-right:26px}
.pr27{padding-right:27px}
.pr28{padding-right:28px}
.pr29{padding-right:29px}
.pr30{padding-right:30px}
.pr31{padding-right:31px}
.pr32{padding-right:32px}
.pr33{padding-right:33px}
.pr34{padding-right:34px}
.pr35{padding-right:35px}
.pr36{padding-right:36px}
.pr37{padding-right:37px}
.pr38{padding-right:38px}
.pr39{padding-right:39px}
.pr40{padding-right:40px}
.pr41{padding-right:41px}
.pr42{padding-right:42px}
.pr43{padding-right:43px}
.pr44{padding-right:44px}
.pr45{padding-right:45px}
.pr46{padding-right:46px}
.pr47{padding-right:47px}
.pr48{padding-right:48px}
.pr49{padding-right:49px}
.pr50{padding-right:50px}
.pr51{padding-right:51px}
.pr52{padding-right:52px}
.pr53{padding-right:53px}
.pr54{padding-right:54px}
.pr55{padding-right:55px}
.pr56{padding-right:56px}
.pr57{padding-right:57px}
.pr58{padding-right:58px}
.pr59{padding-right:59px}
.pr60{padding-right:60px}
.pr61{padding-right:61px}
.pr62{padding-right:62px}
.pr63{padding-right:63px}
.pr64{padding-right:64px}
.pr65{padding-right:65px}
.pr66{padding-right:66px}
.pr67{padding-right:67px}
.pr68{padding-right:68px}
.pr69{padding-right:69px}
.pr70{padding-right:70px}
.pr71{padding-right:71px}
.pr72{padding-right:72px}
.pr73{padding-right:73px}
.pr74{padding-right:74px}
.pr75{padding-right:75px}
.pr76{padding-right:76px}
.pr77{padding-right:77px}
.pr78{padding-right:78px}
.pr79{padding-right:79px}
.pr80{padding-right:80px}
.pr81{padding-right:81px}
.pr82{padding-right:82px}
.pr83{padding-right:83px}
.pr84{padding-right:84px}
.pr85{padding-right:85px}
.pr86{padding-right:86px}
.pr87{padding-right:87px}
.pr88{padding-right:88px}
.pr89{padding-right:89px}
.pr90{padding-right:90px}
.pr91{padding-right:91px}
.pr92{padding-right:92px}
.pr93{padding-right:93px}
.pr94{padding-right:94px}
.pr95{padding-right:95px}
.pr96{padding-right:96px}
.pr97{padding-right:97px}
.pr98{padding-right:98px}
.pr99{padding-right:99px}
.pr100{padding-right:100px}

移动端base.css

标签：名称   inf   pre   animation   帮助   ==   dir   black   mask   

原文地址：https://www.cnblogs.com/kgwei520blog/p/13803501.html