最近我学习了css,想要制作一个包含三个框的页面。但是问题是,它们不能在同一排中,而是要垂直排列。那么该怎么做呢?<style> .box{ width: 200px; h
最近我学习了css,想要制作一个包含三个框的页面。但是问题是,它们不能在同一排中,而是要垂直排列。那么该怎么做呢?
<style> .box{ width: 200px; height: 100px; border: 1px solid black; border-radius: 5px; margin-bottom: 20px; } #box1{ background-color: red; } #box2{ background-color: blue; } #box3{ background-color: green; } </style> <div class="box" id="box1"></div> <div class="box" id="box2"></div> <div class="box" id="box3"></div>
首先,我们使用css设置每个框的样式,包括宽度、高度、边框、圆角等。然后设置每个框的背景颜色,这里我们使用红色、蓝色和绿色。最后,我们将三个框添加到页面中,它们的class都是box,但是它们的id分别是box1、box2和box3。
接下来,我们为框设置margin-bottom属性,这样它们就会在垂直方向上呈现出一定的间距。
在浏览器中查看页面,你会发现三个框已经按照你的要求排列了!
粉丝
0
关注
0
收藏
0