[郑州|荣耀师兄]JS-芦宇|2018年05月22日的日报-技能树.IT修真院

发表于： 2018-05-22 23:56:18

5 758

今天完成的事情

1.完成任务7

页面2难点：头像的自适应，和下方的4个图标按钮

制作思路：

本来想用padding-bottom百分比来做正方形，但感觉和之前写好的header的自适应风格不符，所以就放弃了，改为固定的宽高方便计算。每一行为一个div使用flex布局，放三个块，主轴space-around排列达到间距伸缩的和每行三个不变的效果。

4个按钮部分本来想藏在块的后面然后使用hover向下移出，结果遇到了z-index问题，头像不能很好的遮住按钮遂放弃，改为定为下方display：none隐藏hover display：block再显示，效果突兀了点

本来还担心hover在手机上无效，测试了下发现点击可以触发hover

今天的收获：

1.css透明度的两个方法

rgba：后面的a代表alpha，值为0-1设置不透明度。该方法特点：透明背景，文字不透明

opacity：取值0-1，和上面的一样。特点：全部透明

2.插入音频audio标签

<audio src="someaudio.wav"></audio>

标签的几个值

autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。