今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 
昨天师兄让看了CSS reset。

1）了解了一下什么时CSS reset。

HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。

例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。

开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。

现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉，这就是css reset。

之前用了一点Reset的功能主要是：

使用通配符，将margin和padding修改为0.

查了一下常用的CSS-reset。

这边就写的是H5页面的

/** * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Richard Clark (http://richclarkdesign.com) * http://cssreset.com */html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {    margin:0;    padding:0;    border:0;    outline:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}body {    line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {    display:block;}nav ul {    list-style:none;}blockquote, q {    quotes:none;}blockquote:before, blockquote:after,q:before, q:after {    content:'';    content:none;}a {    margin:0;    padding:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}/* change colours to suit your needs */ins {    background-color:#ff9;    color:#000;    text-decoration:none;}/* change colours to suit your needs */mark {    background-color:#ff9;    color:#000;    font-style:italic;    font-weight:bold;}del {    text-decoration: line-through;}abbr[title], dfn[title] {    border-bottom:1px dotted;    cursor:help;}table {    border-collapse:collapse;    border-spacing:0;}/* change border colour to suit your needs */hr {    display:block;    height:1px;    border:0;    border-top:1px solid #cccccc;    margin:1em 0;    padding:0;}input, select {    vertical-align:middle;}

2）做任务七的时候突然理解了搞懂了Hover在移动端的使用。

之前在web端hover是悬停出现，在页面端则是点击实现，之前用chorme看一直是通过移动端的方式查看的，所以就有点击出现按钮，再点击其他页面隐藏的属性，一直以为是写了个按钮什么的，原来是hover在移动端的属性。

3）然后做任务七的第二个页面，但是出现了，问题就是如何将音频audio和

按钮相关联，网上的都是使用JS，可以实现自动播放，使用的是audio标签。

<audio>标签：用于在文档中表示音频内容。

audio的标签使用有几种方式：

1.autoplay属性：加载完成后，自动播放。

2.loop属性：循环播放。

3.preload属性：用来控制音频在什么时候进行加载。

4）昨天使用了一下Bootstrap的栅格系统。

栅格系统

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

5）

做任务七第二个页面的小图标的时候。切图发现全是由小元素搭建而成的，于是乎自己丧心病狂的去自己画。

小刀用的是切图，是整体切出来的，在十字准心这边出了问题。，放大镜和十字自己画比较简单，但是第三个就比较恐怖了，找了很久资源没找到，后来还是截图做。但是总体布局的时候就散了，于是还是引入的图片。感觉白费了功夫。

明天计划的事情：（一定要写非常细致的内容） 

完成任务七
遇到的问题：（遇到什么困难，怎么解决的） 

音频控制的问题
收获：（通过今天的学习，学到了什么知识）

了解了CSS-reset,栅格系统简单了解