今天完成的事情：用input作为导航栏，并拆出自己的样式表
明天计划的事情：完成任务十四十五 
遇到的问题：原本想运用flex布局，但是无法处理ul不能独占一行，所以对img和按钮，采用了浮动。
收获：对input+label+checked的理解更运用。

导航栏html

<div class="nav"> 导航栏整体盒子
    <input type="checkbox" id="lock-nav"> input选项，type为了在css运用checked，id是与label的for联系在一起。
    <a class="nav-img-link"><img class="logo" src="images/h2-logo.png" /></a> a是img的链接
    <label class="button" for="lock-nav">≡</label> 是按钮，也是需要点击的东西。
    <ul>
        <li><a >首页</a></li> 列表内容
        <li><a >职业</a></li>
        <li><a >推荐</a></li>
        <li><a >关于</a></li>
    </ul>
</div>

css部分

.nav {
  input {display: none;}使input隐藏，不让他默认的小框出现，而影响布局。

 .nav-img-link {
   float: left; 图片的超链接，使他们始终在行的左侧
    img {}设置图片大小等
           }
 label {
   float: right; 使按钮在行的右侧
   ......其他w、h、p、d、m、bg、c等属性
    @media screen and (min-width: 768px) {display: none;} 媒体查询，在768以上时，隐藏
     }
 ul {
    float: right; 当它在768px以上时，是浮动在行的右边
    list-style: none; 
    @media screen and (max-width: 768px) {width: 100%;}在768px一下时，用hight为0将它隐藏，再通过checked的让它显示
   li {
     float: left;当它在768px以上时，能成行的排列的形式     
      @media screen and (max-width: 768px) {float: none;}当它在768px以下时，能成列的排列的形式
           a {}设置超链接属性
              }
    }
  }

              任务十一总结                    

总计：

通过任务十一了解到预处理语言sass和less，并配置了less环境，先用less，感觉熟练了再去看看sass。另外任务十一和前面的任务基本相似，所以html的框架不用大改，只要改变里面的图标和添加栅格系统就可以。当然图标可以从阿里巴巴适量图库中寻找下载。另外就是在less表里进行简单的less操作。用了less的变量内容和嵌套内容。之后再以后任务可以多多练习，加以掌握。

脑图：

耗时：1天

                                            深度思考                                                   

如何使用less?

使用最为普遍的三款CSS预处理器框架分别是 SASS、LESS和Stylus。

1、SASS：最早、最成熟的CSS预处理器，拥有Ruby社区的支持和compass这一最强大的CSS框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。SASS使用.sass扩展名。

2、LESS：受SASS的影响较大，但又使用CSS的语法，更容易上手，在Ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，优点是简单和兼容CSS。LESS影响了SASS演变到SCSS，著名的Twitter Bootstrap就是采用LESS做底层语言的。LESS使用.less扩展名。

3、Stylus：来自Node.js社区，主要用来给Node项目进行CSS预处理，在node.js社区内有一定支持者，但在广泛意义上人气还完全不如SASS和LESS。Stylus使用.styl扩展名。Stylus功能上更为强壮，和JavaScript联系更加紧密。

1首先，我们需要先下载安装Nodejs；再官网下载即可

根据电脑系统和位数选择。

2下载后开始安装，安装教程http://www.runoob.com/nodejs/nodejs-install-setup.html，一直点击下一步就行。

3运行输入以下

4、等待安装完成。此时less安装完成。

5、在webstorm上配置less

在设立直接搜素file Watchers，点击“+”号按钮找到less文件选项点击添加。

出来弹窗，在program里放置你less的路径。

在arguments里放置less工作目录。

如何使用sass?

sass是基于Ruby实现语言开发，因此安装sass前需要安装Ruby。

（注:mac下自带Ruby无需在安装Ruby!） 

先从官网下载Ruby并安装。然后再安装sass即可，

安装好sass，之后我们就可以直接写sass，写好之后把Sass编译成sass。 

less和sass有什么区别？

一、Less、Sass/Scss是什么?

1、Less：

             是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。

             Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

2、Sass：

              是一种动态样式语言，Sass语法属于缩排语法，

              比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass与Scss是什么关系?

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

二、less和sass的相同之处

 Less和Sass在语法上有些共性，比如下面这些：

 1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

三、less和sass的区别

Less和Sass的主要不同就是他们的实现方式。

Less是基于JavaScript，是在客户端处理的。

Sass是基于Ruby的，是在服务器端处理的。

关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

1、Less：

【两种注释方式】

①//less中的注释，但这种不会被编译

②

/*

 * 这也是less中的注释，但是会被编译

 */

【less中的变量】

1、声明变量:@变量名:变量值;

使用变量: @变量名

>>>less中变量的类型：

①数字类 1 10px 

②字符串：无引号字符串 red ;有引号字符串 "haha" 

③颜色类：red #000000 rgb() 

④值列表类型：用逗号和空格分隔 10px solid red

>>>变量使用原则：

多次频繁出现的值、需要修改的值，设为变量

2、混合(MiXins)

①无参混合

声明：.name{} 选择器中调用：.name;

②代参混合

无默认值声明：.name(@param){} 调用：.name(parValue);

有默认值声明：.name(@param:value){} 

调用：.name(parValue); parValue可省

>>>如果声明时，参数没有默认值，则调用时必须赋值，否则报错！

>>>无参混合，会在css中编译除同名的class选择器，有参的不会

3、less的匹配模式：使用混合进行匹配，类似于if结构

声明：

.name(条件一，参数){} 

.name(条件二，参数){} 

.name(@_,参数){}

调用：.name(条件值，参数值);

匹配规则：根据调用时提供的条件值去寻找与之匹配的"MiXins"执行，其中@_表示永远需要执行的部分

4、less中的运算

+ - * / 可带、可不带单位

颜色运算时，红绿蓝分三组计算，组内可进位，组间互不干涉

5、包含了传进来的所有参数：border:@arguments;

6、less中的嵌套：保留HTML中的代码结构

①嵌套默认是后代选择器，如果需要子代选择器，则在子代前加>

②.&表示上一层 &:表示上一层的hover事件

eg:

2、Sass：

1、Sass中的变量

使用 $变量名：变量值，声明变量；

如果变量需要在字符串中嵌套，则需使用#加大括号包裹；

border-#{$left}:10px solid blue;

2、Sass中的运算，会将单位也进行运算，使用时需注意最终单位

例：10px*10px=100px*px

3、sass中的嵌套：选择器嵌套，属性嵌套，伪类嵌套

选择器嵌套 ul{ li{} } 后代

           ul{ >li{} } 子代

&:表示上一层 div{ ul{ li{ &=="div ul li" } } }

属性嵌套：属性名与大括号之间必须有: 

例如:border:{color:red;}

伪类嵌套：ul{li{ &:hover{ "ul li:hover" } } }

4、混合宏、继承、占位符

①混合宏：声明：@mixin name($param:value){}

调用：@include name(value);

>>>声明时，可以有参，可以无参；可带默认值，也可不带；但是，调用时，必须符合声明规范。同less

>>>优点；可以传参，不会生成同名class；

>>>缺点：会将混合宏中的代码，copy到对应的选择器中，产生冗余代码！

②继承：声明：.class{} 调用：@extend .class;

>>>优点：继承的相同代码，会提取到并集选择器中，减少冗余代码

>>>缺点：无法进行传参，会在css中，生成一个同名class

③占位符：声明：&class{} 调用：@extend %class;

>>>优点：继承相同代码，会提前到并集选择器；不会生成同名的class选择器

>>>缺点：无法进行传参

综上所述：当需要传递参数时，用混合宏；当有现成的class时用继承；当不需要参数，也不需要class时，用占位符

5、if条件结构：

@if 条件{}

@else{}

6、for循环结构：

@for $i from 1 to 10{} 不包含10;

@for $i from 1 through 10{} 包含10;

7、while循环结构：

$j:1;

@while $j<10{

.while#{$j}{

border:#{$j}px solid red;

}

$j:$j+1;

}

8、each循环遍历

@each item in a,b,c,d{

//item表示每一项

}

9、函数：

@function func($length){

$length1:$length*5;

@return $length1;

}

调用：func(10px);

10、使用...将传进来的所有参数，接收到一个变量中

@mixin bordeRadius($param1...){

//使用...将传进来的所有参数，接收到一个变量中

border-radius:$param1;

-webkit-border-radius:$param1;

}

4如何使用gulp编辑less？

                   任务十二总结              

任务总结：

通过任务十二，更加熟悉了less，感觉用了less之后，轻松了不少。之外任务十二是任务五和任务六的合并，在做任务十二的时候，把以前任务五和任务六的布局结构改变， 删除了好多嵌套的盒子，让结构更加清晰。任务过程都比较顺利，一天下来，对less的变量，混合，嵌套，更加熟悉。

脑图：

耗时1天 

                  深度思考                   

1.     开发过程中应该遵守哪些编码规范和class命名规范？

基本准则

符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。

一、html规范

a页面的第一行添加标准模式声明!DOCTYPEhtml

b代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）

c html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写

d建议为html根元素指定lang属性，从而为文档设置正确的语言lang="zh-CN"

e不同doctype在不同浏览器下会触发不同的渲染模式

非特殊情况下样式文件必须外链至…之间;非特殊情况下JavaScript文件必须外链至页面底部

f尽可能减少div嵌套.

g在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中

h对于属性的定义，确保全部使用双引号，绝不要使用单引号

i背景图片请尽可能使用sprite技术,减小http请求

j给区块代码及重要功能(比如循环)加上注释,方便后台添加功能

k不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。

二、css规范CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

三、排版规范

如果是在html中写内联的css，则必须写成单行

每一条规则的大括号{前后加空格

属性名冒号之前不加空格，冒号之后加空格

每一个属性值后必须添加分号;并且分号后空格

多个selector共用一个样式集，则多个selector必须写成多行形式

四、规则书写规范

a使用单引号，不允许使用双引号

b每个声明结束都应该带一个分号，不管是不是最后一个声明

c除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写

d除了重置浏览器默认样式外，禁止直接为htmltag添加css样式设置

e每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性

五、class命名

A 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_

b 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合+

c 不允许通过1、2、3等序号进行命名；避免class与id重名

d class用于标识某一个类型的对象，命名必须言简意赅

e 尽可能提高代码模块的复用，样式尽量用组合的方式

f 规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名

布局类：header, footer, container, main, content, aside, page, section

包裹类：wrap, inner

区块类：region, block, box

结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span

列表类：list, item, field

主次类：primary, secondary, sub, minor

状态类：active, current, checked, hover, fail, success, warn, error, on, off

导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,

分割类：group, seperate, divider

等分类：full, half, third, quarter

表格类：table, tr, td, cell, row

图片类：img, thumbnail, original, album, gallery

论坛类：forum, bbs, topic, post

方向类：up, down, left, right

其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

                                                      任务十三总结                                                                               

总结：

任务13主要内容就是学到了侧边栏制作，刚开始耽误了些时间，后来仔细研究了input和checked的内容，发现只是一个点击效果，或者理解成hover也可以，只不过这个“”hover“”是通过checked来气作用。简单说就是运用aside书写菜单，然后通过是input和checked的使它呈现。

用less写的样式，运用less更加熟练，并重新优化了一下自己的代码，去除多余的div和命名。

脑图：

耗时：2天

                                                                         深度思考                                                                          

如何做默认样式重置？resetting 和 normalizing 之间有什么区别？

css reset的功能就是把网页标签样式使用 css 重置。

区别：

 css reset

       目前在网络上，已经有很多关于cssreset的框架，例如雅虎的 YUI 等，我们可以下载下来看看他们是怎么写的，是怎么处理的。同时也可以直接在网页中引用。但是对于小的页面，并不推荐这种做法，那些大的框架，适合大型网站使用，里面几乎对所有的html标签进行了css reset，而我们制作的小页面，并不需要太多的标签，如果使用那么多无用的css reset代码，会导致页面体积变大。推荐的做法是，根据自己页面用到的标签，去寻找相应的css reset代码。

normalize.css

       支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

      特点：

              1.保护有用的浏览器默认样式而不是完全去掉它们

              2.一般化的样式：为大部分HTML元素提供

              3.修复浏览器自身的bug并保证各浏览器的一致性

             4.优化CSS可用性：用一些小技巧

             5.解释代码：用注释和详细的文档来

移动端有哪些常见布局方式？

固定布局

       固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。

流体布局

        流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，通过设置了百分比，你将不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，你可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。

bootstrap布局

       bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。

多列布局

       column-count是css3的一个属性，主要用于文本元素，支持响应式。

       column-count属性指定某个元素应分为的列数。

      column-width属性指定列的宽度。

flex布局

        flex也称为弹性布局，他会根据页面的剩余宽度自动分配空间。

还有就是gird布局你必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中。与 flexbox 类似，网格项（grid items）的源顺序无关紧要。你的 CSS 可以以任何顺序放置它们，这使得使用 媒体查询（media queries）重新排列网格变得非常容易。定义整个页面的布局，然后完全重新排列布局以适应不同的屏幕宽度

4.固定宽度布局开发WebApp如何实现多终端下自适应？ 

       就是给移动端屏幕的一个用于设置layout viewport的参考值，这个值是生产厂商给的。如果layout viewport的宽度等于ideal viewport 的宽度，屏幕上的文字、图片（当它们以px为单位时）的大小看起来就会很恰当。