发表于: 2016-03-20 10:55:30
1 1683
1,今天完成的事情:把task9的小问题改完了。看了看less,套了一个页面,里面装的任务列表。
2,准备让师兄看看代码,试着闯闯关。
3,遇到的问题:刚刚开始就觉得怪怪的,因为我用框架写的时候用container,屏幕宽度默认是1200px,用container-fluid,是全屏幕,这个知道,但是没有注意的是,container-fluid里面还的套一个container,才能显示出正常的,不然一个是正好是1200px,以外地放是白色的,不好看,另一个是全屏幕的,放大版。最后看了看刘思远师兄的代码时,才发现这个问题。
4,收获:
less总结:
首先刚刚开始用less的时候很不习惯,起码我就是。网上说以后会很方便,好吧。我相信,我就一直努力的去从了less。以下是我个人的理解,希望有错的地方各位师兄们,及时批评!谢谢。
一,less,一种css预处理语言,方便快捷的让你以后在一个大型网站上,改变几个数值就能改动一大片代码(这是后话)
二,less有变量,函数,混合,套嵌等属性。
(1)变量:
符号是@,
@变量名:属性;例如:@color:red;这就声明了一个变量。接下来使用一下:.box{color:@color;}
(2)函数:就是说一个class里面的固定样式。完后你就用这个class名字就可以引用他的样式了。
重要的是(@变量名){}
.border(@radius:5px){
-moz-border:1px solid red;
-webkit-border-radius:@radius;
}
(3)混合:可以在不同的选择器中用同一个函数。
.border(@radius:5px){
-moz-border:1px solid red;
-webkit-border-radius:@radius;
}
#header
{
.border();
}
.content
{
.border(10px);^^^^^^^^^^^^^分号在括号外面,有时候写习惯了直接在px后加分号。
(4)嵌套:父选择器下的子选择器都在父选择器里面套着。
#header{
h1{color:@color;}
.border{
.border()
}
&:hover{color:(@color,20%);}
.nav{
.border(10px);
}
&:hover{color:(@color+#000);}
}
例子4里面用了,less中的运算,+-*/……和咱们小学的一样,不过这个运算写的时候得用括号包裹起来,分号写在括号外面。
&:hover,是给上一级加的一个伪类的样式。
网址:less中文网:http://www.1024i.com/demo/less/
我的任务页面:http://119.10.57.69/ptt004/ppt299/task-home/index.html
评论