今天我们来学习一下网格布局,效果图如下:
首先第一步我们先在head标记里把style标签写上,然后去掉默认样式,代码如下图:
第二步创建一个盒子模型,代码如下图:
我们首先给盒子的宽和高300px,然后给盒子一个颜色,比如红色。接着再给盒子一个1px的黑色边框,为了更好的在屏幕中显示我们给盒子加了一个margin值。
这样我们的盒子模型就创建好了,然后我们就可以添加网格代码了。
然后我们给盒子加上网格代码,这里要用到display:gird;做出一个3*3的网格,代码如下:
最后我们加上选择器,给body里面写上div,网格布局就做好了,代码如下:
那么我们今天的练习就完成了。