请老师检查代码

来源:2-7 编程练习

pine小松

2020-03-09 18:40:32

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{

        padding: 0;

        margin: 0;

    }

        .blue{

            width: 100px;

            height: 100px;

            background: blue;

            float:left;

            position:relative;

            left:50px;

            z-index:9;

        }

        .red{

            width: 100px;

            height: 100px;

            background: red;

            float:left;

            position:relative;

            left:-100px;

            top:50px;

            z-index:0;

        }

    </style>

</head>

<body>

    <div class="blue"></div>

    <div class="red"></div>

</body>

</html>


写回答

1回答

好帮手慕言

2020-03-09

同学你好,根据本编程题的要求,同学的效果是不符合的,要求如下:
http://img.mukewang.com/climg/5e661ffb093ccea704970414.jpg

完成本效果,只需要给.blue设置定位,调整偏移值即可,代码如下:

http://img.mukewang.com/climg/5e66206c09e5fdfb04050692.jpg

修改后的代码:

 .blue {
            width: 100px;
            height: 100px;
            background: blue;
            /* float: left; */
            position: relative;
            left: 50px;
            top: 50px;
            z-index: 9;
        }

        .red {
            width: 100px;
            height: 100px;
            background: red;
            /* float: left; */
            /* position: relative; */
            /* left: -100px;
            top: 50px;
            z-index: 0; */
        }

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程