发表于： 2018-06-15 21:27:13
1 447
今天完成的事情：
今天，上午写了脑图和任务总结，，然后下午写了一点任务，但是没有一点头绪，然后今天日报的话要写任务七的总结
明天计划的事情：
明天的话尝试把第一个页面的上面做完
遇到的问题：
就是不知道从哪里下手
收获：
这个是我的脑图的脑图
任务七当时的刚开的时候还是有点困难，应为接触了一点新的知识点，然后刚开始熟悉了一点bootstarap的写法，但是没有写。然后后来做到后边的时候用了display：flex：布局 后来熟悉了CSS3的Flexbox（弹性盒布局模型）以及适用场景
然后遇到的困难是，后来的时候因为第二个页面用flex布局，然后用的vw单位但是格子和里面的内容中间有点空隙，但是在手机上面没有显示。后来的话就是在笔记本上面没有显示所以应该是vw的问题，因为用rem和px的时候就没有。
任务七用了27天
领取时间2018-05-18
完成时间2018-06-14
http://localhost:63342/task/html/task7.html
知识点；这个我当时底部的话用了
前两个还好后面的一个我看不懂
方法一：footer高度固定+绝对定位
方法二：footer高度固定+margin负值
方法三：footer高度任意+js
还有下边总结的5种方法，虽然没有去写但是我的也实现了。
重点用红色写出来了
- <html>和<body>标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0；
- div#container容器：div#container 容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度，不过在IE6是不支持 min-height的，所以为了兼容IE6，我们需要对min-height做一定的兼容处理，具体可以看前面的代码，或者阅读Min-Height Fast Hack了解如何解决min-height在Ie6下的bug问题。另外我们还需要在div#container容器中设置一个"position:relative"以便于里面的元素进行绝对定位后不会跑了div#container容器；
- div#page容器：div#page 这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度 （height）值，当然你在div#page中可以使用border-bottom人水-width来替代padding-bottom，但有一点需要 注意，此处你千万不能使用margin-bottom来代替padding-bottom，不然会无法实现效果；
- div#footer容器：div#footer容器必须设置一个固定高度，单位可以是px(或em)。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个"width:100%"，让他在整个页面上得到延伸；
- 其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等
这个任务需要用到透明
opacity：0：
这个是透明的标签，然后那个是切的图片，然后引入在官网下载的任务需求。给他一个属性透明要放在图片的上面。
这个是任务所需的一个布局，是css常用的布局
下面这个网站是熟悉这个属性的一个游戏，结合下面的属性。
http://flexboxfroggy.com/
justify-content 属性
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
align-items 属性
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
align-self 属性
align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
flex-direction 属性
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
order 属性
order 属性 设置或检索弹性盒模型对象的子元素出现的順序。
flex-flow 属性
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
这几个属性都是FlexBox
看了一下他应用的场景
- 可以在垂直或者水平方向以任意一种对齐方式进行样式布局
- 可以在单一轴线上布局也可以在多行内布局
- 随可用空间的变化进行响应式布局（能够调整其子元素的宽度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空间）
- Flexbox适用于包含有多个元素的盒子的样式渲染
- Flexbox适用于在子元素的尺寸未知或者动态的情况下，对子元素的对齐方式、排列方式以及排序顺序进行控制展示
注意；、
1.还有要注意的是这个页面有的电脑用vw的话就会出现一点问题。就是第二个页面的时候用到flex布局的话用vw的话那几个格子里面的内容和其他地方有空隙
2.第二个页面得到时候要用到网上的一段代码，那个三角形是写出来的不是一张图片
width: 0;
height: 0;
margin-left: 11.25vw;
border-width: 2vw;
border-style: solid;
border-color: #b9e9f5 transparent transparent transparent;这个是我改完之后的代码，只需要写进css就行
3.第三个页面底部要用到半透明，其他的基本上没有什么了，再做三个跳转页面就行了
返回列表
评论