html - 用最少的CSS代码实现 | 用最少的CSS代码实现

我想用最少的CSS代码实现图片...
我该怎么办？

最佳答案

没有JavaScript，你可以这样做

<style>
    .row {
        width: 250px;
    }
    .divSquare {
        width: 50px;
        height: 50px;
        float: left;
    }
    .red {
        background-color: red;
    }
    .blue {
        background-color: blue;
    }
    .green {
        background-color: green;
    }
</style>

<html>
<head>
    <title></title>
</head>
<body>
    <div class="row">
        <div class="divSquare red"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare red"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare red"></div>
    </div>
    <div class="row">
        <div class="divSquare blue"></div>
        <div class="divSquare green"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare green"></div>
        <div class="divSquare blue"></div>
    </div>
    <div class="row">
        <div class="divSquare red"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare red"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare red"></div>
    </div>
    <div class="row">
        <div class="divSquare blue"></div>
        <div class="divSquare green"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare green"></div>
        <div class="divSquare blue"></div>
    </div>
</body>

</html>