CSS是一种用于网页设计的语言,它可以让我们很方便地控制网页上的各种元素。今天我们来学习一下如何制作一个上面六个盒子下面六个的布局。 首先,我们需要在HTML中写出这个布局的基本结构。代码如下: &a
<div class="container"> <div class="top-row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="bottom-row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>
.container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } <br> .top-row { display: flex; width: 100%; justify-content: space-between; } <br> .bottom-row { display: flex; width: 100%; justify-content: space-between; } <br> .box { width: 100px; height: 100px; background-color: #333; }
粉丝
0
关注
0
收藏
0