发表于： 2019-05-31 23:18:41

1 888

今天完成了什么：

完成优化任务7

了解line-hegiht和vertical-align；

遇到了什么问题：

设置图片的时候以前用的是传统的上下左右值去调试居中，但是不是真正意义上的居中，师兄指导后改为给装图片的大盒子设置margin：0 auto；才使得真正的居中，

一开始使用背景框透明度opacity属性，但是发现这个属性会把子元素也弄透明，查了下资料可以使用background-color: rgba来表示，后面的a设置0.5即可。

三角形一开始提交任务的时候使用了固定定位导致上下拉的时候不会三角形还是始终在一个位置不会跟随滚动，后来用绝对定位解决了该问题，relative设置给父元素即可。

这个九宫格图花了很长的时间才写出来。先说底部白线吧，底部白线因为是跟九宫格一样大的，所以我是给footer设置了个空的div，和边框1px。另外它的宽度我是用calc（100%-8vw）8vw是九宫格离左边的外边距。

先弄个大盒子一排装这三个盒子。大盒子设置弹性盒子和等分对齐垂直对齐，

给单独的小盒子设置宽高和边距，并且用视口单位vw能够响应不同的窗口而自适应变化大小，同时设置弹性盒子，并且设置flex-direction：column使这个小盒子里面的水民和一号文字能够垂直居中。再然后给水民盒子设置居中属性，其宽度是要注意的，我们要使用calc减去边框的大小。一号文字注意水平居中和高要设置好就行了。

到了装图标的大盒子，还是设置宽，用vw视口单位表示并且给装小图标的大盒子设置visivbilty：hidden，在：hover的大盒子设置弹性属性并且用居中和等分对其，使图标能够对其。我们会发现小图标会多出一点点，这时候要回到最初的大盒子设置box-sizing：border-box属性，这样边框的属性就能算进宽高里面了，小图标也就能对其上面盒子的边框。

明天计划：

小课题ppt制作，

上手任务8

了解Bootstrap布局

今天收获了什么：

rgba 及 hsla 为 CSS level 3 (CSS 3) 起，新一代表示色彩的单位最大的进展就是增加了「a」这个可以定义颜色不透明度 (opacity) 的 alpha 值；颜色的指定，当然包括了背景色 (background) 、边框色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等，這讓以往網頁設計需要繁瑣過程的半透明效果變得簡單輕鬆多了。

rgba(red 值, green 值, blue 值, alpha 值)red, green, blue 值可以是 0 ~ 255 的整數值，與一般 8 位元顏色的十進位值相同，惟這類表示法不接受十六進位值 (如 ff, 8c) ；也可以是 0% ~ 100% 的百分比值。所以例如， rgb(128,128,128) = rgb(50%,50%,50%) = #808080 。alpha 值 (alphavalue)0.0 ~ 1.0 允許小數一位的數值， 0 →完全透明， 1 →完全不透明， 0.7 → 70% 不透明。 W3C 沒有明確地表示是否允許小數一位以上的數值，不過 firefox 小數二位的數值也可以呈現，真是令人讚賞。

语法：rgba(255, 0, 0, 0.6) → 不透明度 60% 紅色

rgba(0%, 0%, 100%, 0.4) → 不透明度 40% 藍色

了解到vertical-align一大堆乱七八糟的属性

长度通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'

百分值 – % 通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'

baseline 默认。元素的基线与父元素的基线对齐。

sub 降低元素的基线到父元素合适的下标位置。

super 升高元素的基线到父元素合适的上标位置。

top 把对齐的子元素的顶端与line box顶端对齐。

text-top 把元素的顶端与父元素内容区域的顶端对齐。

middle 元素的中垂点与父元素的基线加1/2父元素中字母x的高度对齐。

bottom 把对齐的子元素的底端与line box底端对齐。

text-bottom 把元素的底端与父元素内容区域的底端对齐。

inherit 采用父元素相关属性的相同的指定值。

任务总结：

task7.html

任务耗时：6天

个人脑图：

任务8算是对以前任务知识的一个汇总，三个页面要求三天内最快速度写出来，我是写出来了，但是细节还是有很多需要修改，在九宫格布局上花了一天的时候才处理好，应该是任务一理解的不透彻，要用到百分比的时候没使用。

这下任务对绝对定位和相对定位和弹性盒子以及网页布局有更深的了解，看到原稿就有思路了。

第一个页面主要是百分比宽度，会随着分辨率不断变化而变化，跟以前的任务是一样的。另外就是垂直等分对其，只有用了居中的属性才叫做对齐，用marigin这些属性是耍流氓，后期压根不好维护。

--------------------------------------------------------------------------------------------------------------------------------

第二个页面在小三角形大小上花了些时间，查看张鑫旭的文章才看懂一些，三金哥的文章写得还是很浅显易懂的。

在音频设置上花了些时间，原来可以通过透明度设置透明，然后通过图片来掩饰，达到以假乱真的效果，这很强，还配合定位使用才行。

然后就是九宫格制作，一个是用的是固定的宽高，导致变化设备的时候不会跟着变化，不符合要求，后面才找到用视口单位vw才达到要求，另外盒子的高度是也琢磨了下时间，用了calc解决了自适应带来的高度

还有底部”投死“按钮的设置，上面一个空白线实际上就是底部footer添加三个div使用弹性盒子垂直居中该主轴为y轴垂直，这样就达到了垂直的效果，空白线使用clac即可处理宽度。