用html+css+js实现在一个盒子中装下四个模块分别是故障报修模块、设备维修模块配件更换模块以及其他问题模块,模块可以点击用来跳转页面,前两个模块位于同一行后两个模块位于第二行。配色简洁大方。
时间: 2023-09-14 08:06:31 浏览: 59
以下是一个简单的实现,你可以根据自己的需求进行修改:
HTML代码:
```html
<div class="container">
<div class="row">
<div class="module" onclick="location.href='repair.html'">
<h2>故障报修模块</h2>
</div>
<div class="module" onclick="location.href='maintenance.html'">
<h2>设备维修模块</h2>
</div>
</div>
<div class="row">
<div class="module" onclick="location.href='replacement.html'">
<h2>配件更换模块</h2>
</div>
<div class="module" onclick="location.href='other.html'">
<h2>其他问题模块</h2>
</div>
</div>
</div>
```
CSS样式:
```css
.container {
max-width: 800px;
margin: 0 auto;
}
.row {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.module {
width: calc(50% - 10px);
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
cursor: pointer;
}
.module h2 {
margin: 0;
font-size: 24px;
font-weight: bold;
color: #333;
}
```
JS代码:
```javascript
// 可以在这里添加一些交互效果
```
阅读全文