今天在做任务12，重写任务6和任务5，这次利用less完全在less中编译css，实际使用起来还是非常的方便的但是在嵌套中经常出现问题，一方面在是应用less中想更加的使用好less 所以想封装一些样式，然后再把自己不太了解的样式进行注释，达到以后用起来也顺手的理想，任务做的比较慢但是都是在做任务的时候不断练习，更改以前的代码，class命名，去掉繁杂的盒子包裹，              

以前的代码

<div class="boxtop">

        <div class="boxtop1"><img class="fanhui" src="img/150% 返回.png">

        </div>

        <div class="boxtop2">

            <p class="boxtoptext">个人主页</p>

        </div>

        <div class="boxtop1"></div>

    </div>

更改后的代码

<div class="container">

        <p>个人主页</p>

    </div>

两者显示方面完全一样只是把样式全部更改到less中了

less的样式引用.background(@c:_,@i:_,@s:_,@p:_,@px:_,@py:_,@r:no-repeat){

    background-color: @c ;

    background-image: @i;

    background-size: @s;

    background-position: @p;

    background-position-x: @px;

    background-position-y: @py;

    background-repeat: @r;

}

.font(@fs:_,@lh:_,@ff:_,@ta:_,@c:_,@ws:_,@td:_,@va:_,@tt:_,@ti:_,@ls:_){

    font-size: @fs;

    line-height:@lh;

    font-family: @ff;

    //text-align: justify; 值会拉伸线条，使每条线都有相等的宽度（比如报纸和杂志）。

    text-align: @ta;

    //将所有内容转换为大写或小写字母，或将每个单词的首字母大写uppercase大lowercase小capitalize首大

    text-transform: @tt;

    color: @c;

    //vertical-align 属性设置元素的垂直对齐方式。top middle bottom

    vertical-align: @va;

    //文本换行

    white-space: @ws;

    //字体装饰 text-decoration 属性用于设置或删除文本装饰。text-decoration: none; 通常用于从链接上删除下划线：text-decoration: overline;上   text-decoration: line-through;中   text-decoration: underline;下

    text-decoration: @td;

    //更改元素的文本方向direction: rtl; unicode-bidi: bidi-override;

    //首行缩进px

    text-indent: @ti;

    //字母间距px；word-spacing单词或字间距px

    letter-spacing: @ls;

    //text-shadow 文字阴影效果  两个数值1向右偏移，数值2向下偏移 数值3阴影模糊效果 后面可跟颜色

    //white-space:nowrap overflow:hidden;使用后  text-overflow:ellipsis溢出省略号text-overflow:clip溢出隐藏

}

边做边学习

明天计划的事情 继续完成任务12 再完善自己的less，以后方便直接套用

遇到的问题  在一个多层嵌套中  ：:nth-child(2) :nth-child(1) :nth-last-child(2) :nth-last-child(1)老是出现混乱。。

收获，练习让自己的知识更佳完善