发表于： 2020-06-03 21:49:36

1 1220

今天完成的事：

修改任务5

完成任务7


任务5背景会随页面缩放改变

            background: url("./images/src/task5-1_01.png") no-repeat fixed;
            background-size: cover;
            display: flex;
            align-items: center;

使用fixed固定页面，flex布局文字样式


7-3游戏结果中的文字在缩放时第一行以下文字居中

设置一个新盒子duiqi包裹result,新盒子居中，result向右对齐

            .duiqi {
                text-align: center;

            }

            .result {
                display: inline-block;
                text-align: left;
                font-size: 30px;
                margin: 0 5vw;
                color: #ffc865;
            }

可以使文字达到以下效果

一行

多行


播放器部分使用flex替换相对定位达到更好的缩放效果，使用相对定位时页面缩放自适应会导致播放器下移

播放器父元素使用

                display: flex;

                justify-content: space-between;

将播放器放到右边，文字放左边

                /* 
                position: absolute;
                top: 10.5vw;
                right: 2vw;
                 */


给最下面一排的设置

            .box1:last-child {
                margin-bottom: 10vw;
            }

使点击最下面盒子时不会因为隐藏元素出现而导致，布局改变


https://hejun12345.github.io/jnshu/css.%E4%BB%BB%E5%8A%A17-2.html

https://hejun12345.github.io/jnshu/css.%E4%BB%BB%E5%8A%A17-3.html


明天的计划：

做任务8

上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1