用html+css+js实现在一个盒子中装下四个模块分别是故障报修模块、设备维修模块配件更换模块以及其他问题模块
时间: 2023-09-14 19:06:31 浏览: 50
可以使用以下HTML和CSS代码实现这个盒子和模块的布局。其中,使用了flex布局来实现盒子中四个模块的等分排列。
HTML代码:
```html
<div class="container">
<div class="module">故障报修模块</div>
<div class="module">设备维修模块</div>
<div class="module">配件更换模块</div>
<div class="module">其他问题模块</div>
</div>
```
CSS代码:
```css
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 500px;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
}
.module {
flex-basis: 25%;
height: 150px;
background: #f7f7f7;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
font-weight: bold;
}
```
JS代码可以根据实际需求来编写。