会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132358个问题
WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 198楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 199楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/前端入门与基础知识 201楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 202楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 204楼


小米官网项目2.zip

mi.css里面

1.第511行

.phone-box-left{}里面的width

这个地方原本该设置234px的,但是一设置234px,就摆放错乱,但是经过计算,摆放234px的盒子是可以的,也不知道为什么放不了

2.最后面家电模块,按照课程讲的宽度进行设置,但就是没法摆放正确,位置一直错乱


WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 205楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 207楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 208楼

老师,在写小米商城官网的页脚时遇到一个问题。官网在这一部分有一个两张图片交替闪烁的效果,两张图片瞬间交换只显示一个,我用动画来写会有淡入淡出的效果,请问这个该怎么实现瞬间的交替呢?

QQ图片20220910221157(1).png

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .bot-img {

            width: 600px;

            height: 100px;

            border: 1px solid red;

            text-align: left;

            position: relative;

        }


        .bot-img p {

            width: 92px;

            height: 28px;

            margin-left: 0;

            float: left;

            margin-left: 20px;

        }


        .bot-p {

            background-color: blue;

        }


        .imgs,.imge {

            position: absolute;

            top: 0;

            left: 354px;

            background-color: red;

        }


        .imge {

            animation: change 3s infinite;

            background-color: greenyellow;

        }


        @keyframes change {

            0% {

                opacity: 0;


            }


            50% {

                opacity: 1;

            }


            100% {

                opacity: 0;

            }

        }

    </style>

</head>


<body>

    <div class="bot-img">

        <a href="#">

            <p class="bot-p"></p>

        </a>

        <a href="#">

            <p class="bot-p"></p>

        </a>

        <a href="#">

            <p class="bot-p"></p>

        </a>

        <a href="#">

            <p class="imgs"></p>

            <p class="imge"></p>

        </a>

    </div>

</body>


</html>


WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 209楼

小米官网项目.zip

为什么加了z-index,“下载APP”和“购物车”里面的弹窗依旧被遮挡住

WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 210楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637