使用重构的方式制作出一个水平、垂直都居中短边为50px,长边为150px的红色十字架,要求使用两个div
时间: 2024-02-26 08:58:34 浏览: 30
好的,可以使用两个div来实现这个需求。代码如下:
HTML部分:
```html
<div class="cross-container">
<div class="cross"></div>
</div>
```
CSS部分:
```css
.cross-container {
width: 150px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cross {
width: 100%;
height: 100%;
position: relative;
background-color: red;
}
.cross::before, .cross::after {
content: "";
position: absolute;
background-color: red;
}
.cross::before {
width: 50px;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.cross::after {
width: 100%;
height: 50px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
```
解释一下代码:
首先,我们创建一个div元素,它的类名为cross-container,并为它设置宽度150px、高度50px,并使用绝对定位、transform属性使它水平、垂直居中。
接下来,我们在cross-container元素内部创建另一个div元素,它的类名为cross,并为它设置宽度100%、高度100%,并使用相对定位。
然后,我们使用伪元素:before和:after来创建十字架的两条线。我们为它们都设置绝对定位,并设置它们的背景色为红色。
:before元素的宽度为50px,高度为100%,它的top属性为0,left属性为50%,并使用transform属性使它在水平方向上居中。
:after元素的宽度为100%,高度为50px,它的top属性为50%,left属性为0,并使用transform属性使它在垂直方向上居中。
这样就完成了一个水平、垂直都居中、短边为50px、长边为150px的红色十字架,使用了两个div来实现。