发表于: 2019-12-24 23:47:20

1 1121


今天完成的事情:学习使用less
明天计划的事情:继续任务
遇到的问题:前面写的代码本来就很少,y用less能缩减的很有限
收获:先上之前的页面图

重构之前的代码图

html {font-size10px;}
body {font-size:1.5remmargin0background#eff0f4;}
.fl { floatleftcolor#ffffff}
.fr { floatrightcolor#ffffff}
.tc { text-aligncenterfont-size:1.6remcolor#ffffff}
.header{background#5fc0cdpadding1.5rem;
}
.oo{  background#eff0f4
    position:absoluteleft0;
    margin0 0 0 0;
    width5.9rem;
    height12.6rem;
}

form{margin0 0 0 5.9rem;
    
    background#eff0f4;
    
}
input[type="text"]{
    width100%;
    height5rem;
    
    }
input[type="password"]{
    width100%;
    height:5rem;    
    }
input{margin:0.7rem 0 0 0 ; border0outline:none;}
img{  /*也可以直接使用类名 */
    width:5.9rem;
    height:5.2rem;
    display:block;
    }
.q{margin:0.7rem 0 0.7rem 0;}    
button{width:100% ;
    height:5rem;
    letter-spacing:1rem;
    color#ffffff;
    background-color:#5fc0cd;
    border:none;
    margin-top3.5rem;
    font-size:1.6rem;
}
a{float:right;margin-right1.65remcolor#5fc0cd; } 


写的很乱

重构后的代码图

强多了,明天继续


返回列表 返回列表
评论

    分享到