发表于: 2018-12-25 21:17:41

1 843


今天完成的事情,背景音乐设置。自适应布局调整。

遇到的问题1

背景音乐设置,最开始以为背景音乐设置,在html里面写出播放器代码,隐藏掉,然后用hover效果去做。发现是路子走错了。设置背景音乐,然后用width与height修改样式(只露出播放按键),绝对定位。然后设置背景图片隐藏。

拉伸的时候。还没到320px的时候,界面就崩坏了。


解决方法,播放器用绝对定位,图片设置在html里面写入之后,用flax布局,两端对齐。隐藏播放器。

代码如下

.hint{

    height: 60px;

    background: #b9e9f5;

    display: flex;

    align-items: center;

    justify-content: space-between;(flax布局)

}

.hint-one{

    margin-left: 30px;

    font-size: 1.1rem;

}

.hint-two{

    margin-right: 15px;

}

audio{

    position: absolute;

    right: 0px;

    top: 63px;

    width: 70px;

    height: 50px;

    opacity: 0;(隐藏播放器)

}



投票页面的自适应,拉伸到320px的时候,字体会自动变小,并向下。

lin-height无法解决问题,用flax布局,试了一下。发现还是flax好用。字体自动垂直居中,无论缩小到多小都保持垂直居中。

遇到的问题2,我把hover效果设置到了,数字盒子里面。规定要,鼠标移动到,两个盒子都能触发,但是重新设置hover,无法触发效果。本来以为改动很少,调一下布局就行了。结果发现整体布局都需要动,现在有点懵。



返回列表 返回列表
评论

    分享到