发表于: 2017-03-20 22:38:17
1 702
今天完成的事情:
1、学习less
2、写登陆页的页面(出了点问题,解决不了)
明日计划:
1、完成页面
2、开始任务十二
遇到的困难:
1、本来觉得页面很简单的,但是后来写的时候,我把两行登录用两个li来表示,但是li的高度却莫名的很高,不知道为什么,其他的倒也没什么
收获:
主要的收获就是对于less有了一个了解,并简单的运用了一下,现在对于less的认识就是通过各种方法让写的代码少一点,主要学了一下几点:
1、变量 声明 @w:320px; 运用 width:@w;
2、混合 .border{border:solid 5px red;}
.box{.border;width:200px;}
3、带参数的混合:
.border(@width){border:solid red @width;} //不带默认值
.box{.border(20px)}
.border(@width:5px){border:solid red @width;}
.box{.border();或者.border(10px);}
4、匹配
.pos(r){position:relative;}
.pos(a){position:absolute;}
.box{.pos(a);}
5、嵌套
.box{
width:200px;
ul{
color:red;
li{
line-height:5px;
&:hover{color:white;} //&表示的是上一级的意思
}
}
}
最后输出的css就是
.box{width:200px;}
.box ul{color:red;}
.box ul li{line-height:5px;}
.box ul li:hover{color:white;}
6:计算
@w:20px;
.box{width:@w+2;} //这里的2不用带单位,默认跟@w的单位是相同的
评论