flex弹性盒子布局3

flex弹性盒子布局3-实例

效果图
思路：
总体分为background，head，body，foot四部分

1、background：video标签直接导入视频，设置设置z-index使视频成为背景（z-index大的在上层，可以为负）
设置动画时，autoplay时播放属性，loop是循环属性

autoplay 属性规定一旦音频就绪马上开始播放。如果设置该属性，则视频将循环播放。
loop 属性规定当视频结束后将重新开始播放。如果设置了该属性，音频将自动播放。

<video autoplay="autoplay" loop="loop">
		<source src="src/hauanxi.mp4" type="video/mp4"></source>
</video>

.video{
	position: absolute;
	width: 100% ;
	height: 100% ;
	z-index: -1;
}

注意：z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效。 总之:记住z-index的意义,以及必须在position的条件下使用。

2、head部分
分为左右两个部分，用了flex布局，很轻松就搞定了（之前不会用flex相对绝对布局，部个局都要花半天，flex的方便谁用谁知道）
顶部left部分布局：
宽度左右各占一半，flex布局头部竖直居中

.left{
	width: 50%;
	height: 100px;
	display: flex;
	align-items: center;
	margin-left: 40px;
}

right部分：
要在右边，所以设置row-reverse;依旧竖直居中

.right{
	width: 50%;
	height: 100px;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

弹性盒子如何一行放两块：在外面再套一弹性盒子flex就好了

3、body部分，布局同理，需要两个按钮，播放和背景声音控制按钮（按钮点击事件我没有写），右侧一个评分
4、foot底部部分
和头部类似，元素更少。

总结，收获最大的还是了解熟悉了flex布局，很方便的一个布局；也遇到了一些问题，比如用css选择器设置属性的时候，总是会找错对象，达不到设置的效果；chrome对视频的兼容性不太好（可能是我太久没更新的原因），视频无法播放找了很久的问题，然后尝试性的换了IE试了一下表示完全正常，可以给以后遇到类似的资源加载的问题提供一个寻找问题的思路
部分图标的来源：阿里矢量图标库

后续完成了js的学习之后可能会继续完善这个实例，相关资源已上传，可供参考学习