今天完成的事情：改首页的样式

明天计划的事情：做页面的响应式

遇到的问题：今日无问题

收获：响应式图片的写法、auto的用法

响应式图片的写法

<img src="..." class="img-responsive" alt="响应式图像">

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

 class 包含了一些 css 属性。

在下面的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

.img-responsive {

  display: inline-block;

  height: auto;

  max-width: 100%;

}

这表明相关的图像呈现为 inline-block。当把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。

设置 height:auto，相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

auto的用法

auto是自动的意思， 定义一个方向为auto，可以理解为此方向随便，自由。

居中 margin:0 auto

居左 margin:0 auto 0 0

居右 margin:0 0 0 auto

margin:auto; 表示上下左右都自动

margin:  20px auto; 

上下边距为20px， 左右自动

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。 

如果只提供一个，将用于全部的四边。 

如果提供两个，第一个用于上－下，第二个用于左－右。 

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。