发表于: 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



返回列表 返回列表
评论

    分享到