今天完成的事情：

 任务七马上完成

简单会制作雪碧图了
明天计划的事情： 

完成任务7，开始任务8
遇到的问题：

  雪碧图的制作，任务7最后一图文字格式花了点时间完成，基础知识用的不熟练，
收获：

雪碧图的制作，还有就是文字之间的空格可以用代码显示出来

1，Html中空格

 2，Css 的方式空格

 　  CSS中当 white-space 属性取值为pre时，浏览器会保留文本中的空格和换行,例如：

      <div style="white-space:pre">AA   BB<div> 

      显示效果为： AA   BB

　　CSS的 letter-spacing 属性用于设置文本中字符之间的间隔，例如：

　　<div style="letter-spacing:5px;">欢迎光临！</div>

　　显示效果为： 欢   迎   光   临   ！

　　CSS的 word-spacing 属性用于设置文本中单词之间的间隔，例如： 

　　<div style="word-spacing:5px">Happy new year!</div> 

　　显示效果为： Happy   new   year! 

3 , Html 中常用的字符

任务五首先就是学会背景图片的运用，

background-image:url() 引入背景图片，

background-repeat:no-repeat 设置背景图片是否重复平铺

background-position:left top 设置图片的css背景定位，left代表靠左，top代表靠上

background-color 背景颜色
background-attachment 背景图片是固定还是滚动

第二就是下拉框的运用，我是引用的菜鸟教程，看不懂就多试试，慢慢就弄懂了，通过这个任务能学到： 1.处理更复杂的移动端页面； 2.同样是左中右的布局，可以用很多不同的方法来完成； 3.用css3的方法更好地拉伸背景图,还有就是flex的布局，这个布局跟可以很直观名了的简化布局问题，要多用多记，是以后常用的布局方式.

深度思考；

第一css可以绘制哪些常见的特殊形状？

Square(正方形)

#square {    width: 100px;    height: 100px;    background: red;}

Rectangle(矩形)

#rectangle {    width: 200px;    height: 100px;    background: red;}

Circle(圆形)

#circle {    width: 100px;    height: 100px;    background: red;    -moz-border-radius: 50px;    -webkit-border-radius: 50px;    border-radius: 50px;}/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

Oval(椭圆形)

#oval {    width: 200px;    height: 100px;    background: red;    -moz-border-radius: 100px / 50px;    -webkit-border-radius: 100px / 50px;    border-radius: 100px / 50px;}/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

先举列说几个网页如下http://www.webhek.com/post/40-css-shapes.html

第二如何理解vertical-align与line-height？

1.1 line-height属性可赋值

设置固定长度(px,rem等固定单位)

设置数字:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

设置百分比:基于当前字体尺寸的百分比行距

注意：数字可以直接被继承，然后在计算行高，而百分比是先计算出行高，在以px继承

2.vertical-align基本概念与应用

定义：使行内元素的基线相对于该元素所在行的基线的垂直对齐

默认值baseline:元素基线与父元素基线对齐

众所周知，vertical-align支持很多属性值；(关键字值:vertical-align等等: middle;长度值：vertical-align: 4px等等；百分比值：vertical-align: 10%...等等)

注意：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

第三flex布局运用和理解

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{

  display: flex;

}

行内元素也可以使用 Flex 布局。

.box{

  display: inline-flex;

}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{

  display: -webkit-flex; /* Safari */

  display: flex;

}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

第四flex justify-content属性的有关运用？

justify-content属性定义了项目在主轴上的对齐方式。

.box {

  justify-content: flex-start | flex-end | center | space-between | space-around;

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

第五下拉框怎么怎么运用？

原生的select下拉框其实挺方便的，直接把选项写入option就能得到一个流畅的下拉框，但是原生的样式也是让人忧愁。
首先，在各大浏览器中渲染出来的样式结果也是多样化，ie下的样式更是与众不同，会根据选项位置进行滑动。可以参考菜鸟教程。