今天完成的事情：

1.用sass重构了任务6

2.提交了任务12，并写了任务总结，更新相关档案

3.准备了一点小课堂

4.详细了解了一下学分制度

明天计划的事情：

1.开始任务13

遇到的问题：

1.在任务6中下拉选框头部中间的两个边框样式时颜色渐变的，一直找不到方法实现这个效果，百度了一下，发现css3有一个新属性gradients可以实现颜色渐变。

收获：

1.CSS3 渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients）可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

有两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

（1）CSS3 线性渐变

创建一个线性渐变，必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，也可以设置一个起点和一个方向（或一个角度）。

语法：

background: linear-gradient(color1,color2); 

color1为起点结点，color2为结束点结点。

同时也可以定义渐变的方向，是从上到下渐变，还是从左至右渐变，或者从右至左渐变，默认情况下是从上至下渐变的。

书写：

background: linear-gradient(direction,colro1,color2);

direction表示渐变的方向，此值直接写方向的起点即可，如：渐变方向为从左至右，直接写left即可，渐变方向为从下至上，直接写bottom即可。

当然也可以对角渐变，如：从左上角到右下角，书写为background: linear-gradient(left top,color1,color2);

（2）角度渐变

如果还想更多地控制渐变方向，可以改变渐变的角度。

书写：

background: linear-gradient(angle,color1,color2);

角度是指水平线与渐变线之间的角度，是逆时针的。

（3）在渐变中使用透明度

CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

（4）重复的线性渐变

repeat-linear-gradient函数用于创建重复的线性渐变

（5）径向渐变

径向渐变是由中心向外渐变的。可以定义它中心(默认渐变是中心是center)、形状（原型或者椭圆形）、大小等。

书写：background: radial-gradient(center,size,start-color,last-color);

默认是均匀渐变，也可以是非均匀渐变，改变渐变颜色的比例就行；还有重复渐变也是可以的。

2.编码中的class命名

不但要自己能看懂代码，也要别人能轻松读懂自己的代码，下面是一些命名规则：

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

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

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

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

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

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

在实际编程中，命名问题一直是很麻烦的问题，要想代码可读性高，维护方便，就必须规范命名。介绍几种命名方法：

（1）原子类命名规则

将复用性高的单条属性直接命名成类，如： .ml5{margin-left: 5px;}

（2）模块命名规则

（3）按照职能划分命名规则

例如，模块是nav，便可以命名nav-tittle、nav-left

（4）BEM

BEM思想是由于项目开发中，每个组件都是唯一无二的，其名字也是独一无二的，组件内部元素的名字都加上组件名，并用元素的名字作为选择器，自然组件内的样式就不会与组件外的样式冲突了。这是通过组件名的唯一性来保证选择器的唯一性，从而保证样式不会污染到组件外。

BEM的命名规矩很容易记：block-name__element-name–modifier-name，也就是模块名 + 元素名 + 修饰器名。

3.meta标签中的http-equiv属性

meta是html语言head区的一个辅助性标签。meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等。

meta中有个http-equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 

meta标签的http-equiv属性语法格式是： 

<metahttp-equiv="参数"content="参数变量值">； 

其中http-equiv属性主要有以下几种参数： 

A、Expires(期限) 

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 

用法：<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 

注意：必须使用GMT的时间格式。 

B、Pragma(cache模式) 

说明：禁止浏览器从本地计算机的缓存中访问页面内容。 

用法：<metahttp-equiv="Pragma"content="no-cache"> 

注意：这样设定，访问者将无法脱机浏览。 

C、Refresh(刷新) 

说明：自动刷新并指向新页面。 

用法：<metahttp-equiv="Refresh"content="2;URL=http://www.jb51.net">(注意后面的引号，分别在秒数的前面和网址的后面) 

注意：其中的2是指停留2秒钟后自动刷新到URL网址。 

D、Set-Cookie(cookie设定) 

说明：如果网页过期，那么存盘的cookie将被删除。 

用法：<metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> 

注意：必须使用GMT的时间格式。 

E、Window-target(显示窗口的设定) 

说明：强制页面在当前窗口以独立页面显示。 

用法：<metahttp-equiv="Window-target"content="_top"> 

注意：用来防止别人在框架里调用自己的页面。 

F、content-Type(显示字符集的设定) 

说明：设定页面使用的字符集。 

用法：<metahttp-equiv="content-Type"content="text/html;charset=gb2312"> 

G、content-Language（显示语言的设定） 

用法：<metahttp-equiv="Content-Language"content="zh-cn"/> 

H、Cache-Control指定请求和响应遵循的缓存机制。 

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on 

ly-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下 

Public指示响应可被任何缓存区缓存 

Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效 

no-cache指示请求或响应消息不能缓存 

no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 

max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应 

min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应 

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。 

进度：css任务12

任务开始时间：2018.6.13

预计demo时间：2018.6.14

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/project-task-719.html

任务总结：

任务名称：CSS=TASK12

成果链接：https://huangbaihei.github.io/jnshu-css/task12/task12-5.html

任务耗时：2018.6.13-2018.6.14(2天)

技能脑图：

1.官方脑图：

2.个人脑图：

任务总结：

1.这个任务主要是进一步熟悉sass的使用，变量，嵌套，混合宏等，对之前的任务5、6进行代码重构并完善之前代码中的不足；

2.使用sass提取编写css时反复使用的部分建立变量或混合宏重复调用，这样能简化代码编写，提炼代码结构；

3.这个任务要求去除bootstrap框架，在没有框架的情况下重写，这需要自己用宽度百分比的方法实现自适应，暂时还没有用到响应式；

4.在重构代码时，代码规范很重要，不然代码很难去修改维护，这对后期调整需求有很大影响；

5.这个任务在大部分布局上时采用了flex和position的布局方法，在图片的使用上再一次接触了雪碧图的用法。