九宫格——用html+css制作一个网页

要求：

1.通过html和css制作一个可以根据页面缩放进行变化的九宫格。

2.并且可以通过手机浏览器访问。

过程：

1.网页制作

先不管通过网页访问这一项，先写一个本地的网页。

首先要把九宫格的形状做出来。九宫格就像魔方的一个面，所以我先做一个大的div，然后把它分成三个行，然后每个行再分成三个小块。

于是我在body中先写了这样一个结构:

<div>
     <div>

     </div>

     <div>

     </div>

     <div>
                
     </div>
</div>

假设每个小正方形的边长为50px，颜色为橙色（#ff7700）。
先不设置排列方式，将每一行分为三个小正方形。

        <div>
            <div>
                <div class="little-square"></div>
                <div class="little-square"></div>
                <div class="little-square"></div>
            </div>
            <div>
                <div class="little-square"></div>
                <div class="little-square"></div>
                <div class="little-square"></div>
            </div>
            <div>
                <div class="little-square"></div>
                <div class="little-square"></div>
                <div class="little-square"></div>
            </div>
        </div>

有点粗暴，也还没有设置边距，所以他现在是一个长条状，他们粘在了一起：

给小方块的class加上外边距属性：

下面要改变一下小方块的排列方式，行和行是竖直排列，每一行中的小方块是水平排列，所以创建row类，并添加到每一行之上。

.row{
    display:flex;
 }

刷新后可以看到呈如下排列，已经大概符合形状了。

设置小正方形的样式使其美观。

        .little-square {
            margin: 6px;
            background-color: #ff7700;
            width: 50px;
            height: 50px;
            border-radius: 15%;
        }

最终小正方形变成下图样式。