发表于: 2018-08-30 20:04:09

1 599


今天完成的事情:


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


  • 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
  • CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
  • 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
  • JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
  • 定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
  • 任务7要求了积压不能变形,可以跳转页面,就需要了超链接a,但是a是有格式的,所以就需要消除,同样半透明处理,更是要选好,才能使父元素背景透明,而且子元素不透明,
  • 还有就是visiblity
visible
默认值。元素是可见的。
hidden
元素是不可见的。
collapse
当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间
会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit
规定应该从父元素继承 visibility 属性的值。

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



明天计划的事情:开始任务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;---把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉。

建议用第一个元素。

虽然 Visibility 和 Display 属性都可以隐藏一个元素,但它们之间的不同点在于 visibility: hidden 在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间,而 display: none 则表现得像把元素从页面里删除了,在页面上看不出该元素还存在着。
另外,display: block 和 display: inline 的区别在于 block 元素会在页面中独占一行,而 inline 元素不会,有的对象默认为 block 元素,而有的对象则默认为 inline 元素,大家在使用时需要注意防止相同属性的重复定义。
Visibility 和Display 属性虽然都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流。
如果你想隐藏某元素,但在页面上保留该元素的空间的话,你应该使用visibility:hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display:none 。

但我用到是

  line-height17vw;
   text-aligncenter;
   margin0;
}
.shop:hover ~ .banner{
opacity:1;

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


收获:

认识了框架,选择器也有更多的了解,挣了学分。

返回列表 返回列表
评论

    分享到