发表于: 2018-08-30 20:04:09
1 597
今天完成的事情:
通过了任务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;---把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉。
建议用第一个元素。
但我用到是
line-height: 17vw;
text-align: center;
margin: 0;
}
.shop:hover ~ .banner{
opacity:1;
这个元素,它可以吧盒子变透明,但是仍然占据空间。
收获:
评论