今天完成的任务

a.日报6.13-6.15的温习

b.任务6的环境配置，资料查找，初步header的代码编写

c.拓展知识

明天的计划

a.日报6.16-6.20的温习

b.任务6的继续编写

c.拓展知识

遇到的问题

a.制作的css sprites 像素大了而background-size修改的是整张css sprites图的大小；后来师兄告诉了我transform属性，通过学习transform知识运用 transform： scale(0.5)进行所缩小1倍解决

b.想做出button的点击背景变色效果，首先查了一下百度，给的方案首推的是javascript，暂时就算了，继续查询发现可通过使用css伪类实现点击元素变色的效果，两个伪类是:active, :focus，做一个标记，等Html写完后尝试改善。

收获

HTML中dl、ul、ol用哪个比较好？(任务5的深度思考）

列表分为：有序列表和无序列表和列表项；

ul是无序列表，也就是说没有排列限制可以随意加li

<ul> 

<li>可以随意放置</li> 

<li>可以随意放置</li> 

<li>可以随意放置</li> 

</ul>

ol就序列表，会按照你写的li前后依次排列； 

<ol> 

<li>我是第一</li> 

<li>我是第二</li> 

<li>我是第三</li> 

</ol> 

dl是定义列表，会默认前后层级关系； 

<dl> 

<dt>我是头</dt> 

<dd>我是内容</dd> 

<dd>我是内容</dd> 

</dl> 

各有各的好处:个人理解

所有网页中出现的列表或者类似列表的地方都可以用ul,ol,而dl则适合在类似一问一答（或者图文排版)的时候

css sprites(雪碧图)

CSS雪碧图即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。

background-position属性在雪碧图中的用法：参考资料https://blog.csdn.net/bingkingboy/article/details/51059209（因为学院有，我就不大出来了，因为没有demo不好文字解释，而写demo又太长，具体我已经记在我的日志记事本里了）

学习了css sprites的制作方法，但是还是繁琐，然后百度发现了一个方便的雪碧图制作网站https://blog.csdn.net/zifeiyu130/article/details/79202033（附带css代码）

CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

参考资料：https://blog.csdn.net/qq_18995513/article/details/72765269

定义：在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。

一.旋转 rotate

用法：transform: rotate(45deg);

只有一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

二.缩放 scale

用法：transform: scale(0.5)  或者  transform: scale(0.5, 2);

参数表示缩放倍数；

一个参数时：表示水平和垂直同时缩放该倍率

两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

三.倾斜 skew

用法：transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

图解：skewX(30deg) ：

skewY(10deg) ：

skew(30deg, 10deg) ：

四.移动 translate

用法：transform: translate(45px)  或者 transform: skew(45px, 150px);

参数表示移动距离，单位px，

一个参数时：表示水平方向的移动距离；

两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

五.基准点 transform-origin

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

用法：transform-origin: 10px 10px;

共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

六.多方法组合变形

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法，这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate