今天完成的事情：

通过了任务7，任务7好多做的并不完美，做任务的时候我不容易想到，一些之前用过的，但是做任务，是需要结合起来使用，因为一个页面有区别的，各个板块要求也是不同，做了几个挣分任务，看了选择器问题，对选择器有了更深刻的了解，还看了框架，了解了一下任务8框架就是

• 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
• CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
• 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
• JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
• 定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
• 任务7要求了积压不能变形，可以跳转页面，就需要了超链接a，但是a是有格式的，所以就需要消除，同样半透明处理，更是要选好，才能使父元素背景透明，而且子元素不透明，
  
• 还有就是visiblity

虽然没有用到但是还是了解了一下

明天计划的事情：开始任务8用框架做任务8

遇到的问题：

图片缩放的问题，雪碧图放大并且自适应，

.banner{
    background:url(../img/task7.png) no-repeat;
height: 10vw;
    width:21vw;
    opacity:0;
    margin: 2vw;
  background-size: 20vw;

我用到了background-size这个元素，之前并没有用过，所以就百度了一下图片缩放问题，就找到了大概就是这个意思，css background-size 属性详解，background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。

background-size：100% 100%;---按容器比例撑满，图片变形；

background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。

建议用第一个元素。

但我用到是

  line-height: 17vw;
   text-align: center;
   margin: 0;
}
.shop:hover ~ .banner{
opacity:1;

这个元素，它可以吧盒子变透明，但是仍然占据空间。

收获：