发表于: 2016-03-14 11:41:55

3 1817


今天完成的事情:

今天先预习了less的一些基础操作;

变量设置(只能在设置时改变变量的值,在后面引用变量的时候不能改变): 

less文件:

@w10: 10px;    .nav {width: @10;} 

  >>   编译出的css文件  .nav {width: 10px}

混合

less文件:

.wid10-red { width: 10px; color: red;} .nav {.wid10-red; height: 10px}  

>>  编译出的css文件 .nav { width: 10px; color: red; height: 10px;}

嵌套

less文件:

.nav { 

       width: 10px; height: 10px; 

       li { color: red;}

       a { 

           text-decoration: none;

           &:hover {     //"&"表示上层选择器,即a:hover;

              background-color: pink;

          }

}

>> 编译出的css文件:

.nav { width: 10px; height: 10px; }

.nav li { color: red;}

.nav a {  text-decoration: none;}

.nav a:hover {  background-color: pink;}

匹配

less文件:

.pos(a) { position: absolute;}

.pos(r) { position: relative;}

.pos(f) { position: fixed;}

.button { .pos(f); }

>> 编译出的css文件:

.button { position: fixed;}



今天学习了sublime text3下的emmet插件各种快捷将的用法(用的是emmet插件自带的默认快捷键,可以修改个人的快捷键);常用的快捷键:

shift+ctrl+g,添加父标签

ctrl+`,选择标签的内容

alt+shift+↑(↓)增(减)10,这个只针对数字有效

ctrl+↑(↓)增(减)1,这个只针对数字有效

alt+↑(↓)增(减)0.1,这个只针对数字有效

ctrl+e 简写快捷键

     简写快捷键示例:

     div.box1  →   ctrl+e   >> <div class="box1"></div>

     div#box2 →   ctrl+e   >> <div id="box2"></div>

(ps:进阶练习链接:https://www.douban.com/note/299431625/)


明天计划的事情:

明天找个安静的地方学习,把任务8静态布局以及任务的卡片式翻页搞定。


遇到的问题:

坑啊,今晚设计网页的时候一室友在我旁边听电话,又是gf又是ma的,搞得今晚一个小时的时间给没了,我了去个。。。当时我就想给他一拳,但是面对重量级的悬殊,我还是冷静下来,去跑个10圈泄泄愤先。。。。


收获:

学习了less的基础操作

sublime text的emmet快速编写html


返回列表 返回列表
评论

    分享到