一直以来以为日报是任务完成的总结。。。看了几篇师兄的上品日报，才发现是学习的过程和目标总结，深刻认识到对于过去忽视日报重要性的错误。

• 本次日报之后不再重复同样的错误，本次任务由于一次性完成的，对比其他师兄的日报，再次深刻认识到日报的重要性。所以本篇尽量学习师兄上品日报，希望今后的日报能达到要求。
  

• 1.任务前的思考：
  

• 1.1任务目标的布局和内容

• 1.1.1首页页面：首页页面结构比较简单。垂直方向布局三个盒子，水平方向基本没有复杂布局，可以使用boostrap4的container，container-fluid
  

• 1.1.2首页页面细节：三个图标的位置尤其是黄色三角的位置任务提示过需要注意，并且三个图标都是可点击对象，必须是img元素，至于点击之后的页面变化应该还没学到。两个三角图标都没有影响其他元素的居中效果，并且右边距相同，故准备使用绝对定位；底部小圆点是字符任务提示用css效果，但是他的位置的层级似乎很难确定，准备设置在在外侧和黄色三角一层

• 1.2.1投票页面：看似复杂，实际布局也比较清晰，垂直布局4个盒子，标题，提示栏，玩家区域，投死按钮区域。其中提示栏播放按钮需要学习audio。玩家区域整体结构和九宫格很像，初步考虑尝试使用display:flex，需要学习巩固flex布局，小图标区域初步设想应该与玩家图标同级且只在hover显示。投死按钮是固定定位始终保持在页面最下方，使用position：fixed

• 1.2.2投票页面细节：提示栏下方小字上方的小三角，准备使用背景图片定位

• 1.3.1结果页面：结果页面整体布局也是垂直方向4个区域，header/main/content/footer。main区域胜利图像准备使用背景图片，图片黄色文字和白色文字为三个子元素。content区域是重复的细节结果。footer区域是两个按钮，并且position，fixed

• 1.3.2结果页面细节。展示死亡人数的排列非常整齐，并且对齐很规则。尤其是两个字中间空的一个字符位置。

• 2.学习内容

• 2.1audio：通常使用audio标签引用背景声音，当选用不同格式时使用source标签。controls属性可以显示控制条控制声音文件播放。autoplay：自动播放,loop循环播放,muted静音，preload提前加载。

• 2.2flex布局：display：flex设置在父元素容器上，定义子元素的排列规则。轻松解决居中，对齐，间距，平均分布的问题；多行列设置需要先设置列布局column对每一行设置flex设置每一行的布局

• 3.过程中的问题