请老师检查代码,谢谢

来源:3-24 编程练习

叫我丽红

2022-04-13 16:39:18

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- <meta name=""> -->

    <style>

        #box{

            width:80%;

            margin:0 auto;

            background: #ccc;

            text-align:center;

        }

        #box>img{

            display: inline-block;

            padding:1.5%;

            width:21%;

            height:200px;

        }

        /*此处写代码*/

        @media (max-width:960px){

            #box{

            width:60%;

            }

            #box>img{

                width:26.6666666667%;

            }

        }

        @media (max-width:780px){

            #box{

            width:40%;

            }

            #box>img{

                width:40%;

            }

        }

        @media (max-width:440px){

            #box{

            width:20%;

            }

            #box>img{

                width:80%;

            }

        }

    </style>

</head>

<body>

    <div id="box">

        <img src="http://img1.sycdn.imooc.com/climg/5a45e49100014e5010601059.jpg" alt="">

        <img src="http://img1.sycdn.imooc.com/climg/5a45e53b00012e6d09940789.jpg" alt="">

        <img src="http://img1.sycdn.imooc.com/climg/5a45e53c0001d04e09940732.jpg" alt="">

        <img src="http://img1.sycdn.imooc.com/climg/5a45e49100014e5010601059.jpg" alt="">

        <img src="http://img1.sycdn.imooc.com/climg/5a45e53b00012e6d09940789.jpg" alt="">

        <img src="http://img1.sycdn.imooc.com/climg/5a45e53c0001d04e09940732.jpg" alt="">

    </div>

</body>

</html>


写回答

1回答

好帮手慕小李

2022-04-13

同学你好,代码可以实现需求,棒棒的!继续努力。

但是还是可以有优化的地方哟,如下:

https://img.mukewang.com/climg/62568eab090c178110580692.jpg

同学自己试试,祝学习愉快!

0

0 学习 · 15276 问题

查看课程