前端笔记

容易忘记的部分

从左到右不换行，超出才换行
flex-box m-flex-box-wrap

div旋转45度

  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);}

隐藏但是占据位置

visibility:hidden;  //隐藏
visibility:inherit;   //取消

css动画

.t-a{transition:all .3s;-o-transition:all .3s;-moz-transition:all .3s;-webkit-transition:all .3s;}
.t-a-fast{transition:all .15s;-o-transition:all .15s;-moz-transition:all .15s;-webkit-transition:all .15s;}
.t-a-slow{transition:all .6s;-o-transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;}

animate动画

.in-right{animation:fadeInRight .2s 1;-webkit-animation:fadeInRight .2s 1;}.in-right-1{animation:fadeInRight 1s 1;-webkit-animation:fadeInRight .2s 1;}
.in-down{animation:fadeInDown .2s 1;-webkit-animation:fadeInDown .2s 1;}.in-down-1{animation:fadeInDown 1s 1;-webkit-animation:fadeInDown .2s 1;}
.in-up{animation:fadeInUp .2s 1;-webkit-animation:fadeInUp .2s 1;}.in-up-1{animation:fadeInUp 1s 1;-webkit-animation:fadeInUp .2s 1;}
.in-left{animation:fadeInLeft .2s 1;-webkit-animation:fadeInLeft .2s 1;}.in-left-1{animation:fadeInLeft 1s 1;-webkit-animation:fadeInLeft .2s 1;}
.in-fade{animation:fadeIn .2s 1;-webkit-animation:fadeIn .2s 1;}.in-fade-1{animation:fadeIn 1s 1;-webkit-animation:fadeIn 1s 1;}.in-fade-2{animation:fadeIn 2s 1;-webkit-animation:fadeIn 2s 1;}
.out-right{animation:fadeOutRight .2s 1, dispear .2s;-webkit-animation:fadeOutRight .2s 1, dispear .2s;}
.out-fade{animation:fadeOut .2s 1, dispear .2s;-webkit-animation:fadeOut .2s 1, dispear .2s;}

苹果版创建文件夹 mkdir
进入文件夹 cd
查看当前目录 ls
创建文件里面的内容 touch filename/file content
回到根目录 cd ../
查看我当前位置 pwd

• 阴影

 /*阴影*/
.shadow-bottom{box-shadow: 0 1px 9px 1px rgba(0,0,0,.15);-webkit-box-shadow: 0 1px 9px 1px rgba(0,0,0,.15);}

图片占位

<Div ai='c' jc='c' oh _pr b={[1,'s','fe']}>
       <Img wp={100} hp={100} src='/placeholder/placeholder_3x2.png'/>
       <Div _pa _l={0} _t={0} wp={100} hp={100} jc='c' ai='c'>
              图表
       </Div>
</Div>

• 小三角

<Div _pa nwp _l={32} _t={16} w={0} h={0} b={[6,'s','ff']} bl={[6,'s','fe',0]} br={[6,'s','fe',0]} bt={[6,'s','fe',0]}/>

• 渐变半透明背景

.black-translucency{background-image: linear-gradient(-180deg,rgba(0,0,0,.85) 10%,rgba(153,153,153,.1) 100%);} 

• 改变滚动条样式className='change-scroll'

/*改变滚动条样式*/
.change-scroll::-webkit-scrollbar{width:2px;height:2px;}/*滚动条整体样式*/
.change-scroll::-webkit-scrollbar-thumb{background:linear-gradient(#ccc,#eee);border-radius:2px}/*滚动条里面小方块*/
.change-scroll::-webkit-scrollbar-track{background: #fff; border-radius:5px;}/*滚动条里面轨道*/

• 增加背景图

  /*首页增加背景图*/  
  .home-bg{background: url('/img/hilker/bg/world_blue.jpg') no-repeat  scroll center center / 100% }