以下是一个简单的田园风格卫生间置物架的 HTML 代码示例:
```html
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.shelf {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.shelf-item {
background-color: #f8f8f8;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 20px;
text-align: center;
flex: 1;
margin: 0 20px;
}
.shelf-item img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
.shelf-item h3 {
font-size: 18px;
margin-bottom: 10px;
}
.shelf-item p {
font-size: 14px;
color: #666;
margin-bottom: 0;
}
@media (max-width: 768px) {
.shelf {
flex-direction: column;
}
.shelf-item {
margin: 0 0 20px 0;
}
}
简约田园风格,带挂钩设计
带抽屉设计,储物更方便
多层设计,适合摆放更多物品
```
这个代码示例包含了一个简单的三个格子的田园风格卫生间置物架布局。每个格子都有一个图片、标题和描述。代码使用 Flexbox 布局来实现响应式设计,在窄屏幕上会自动调整为垂直排列。你可以根据需求进一步定制和美化这个布局。
查看详情
查看详情