以下是一个幼儿园全家福照片装饰的HTML代码示例:
```html
/* 整体样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
/* 容器样式 */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 照片网格样式 */
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.photo-grid img {
width: 100%;
height: auto;
border-radius: 5px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.photo-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.photo-grid {
grid-template-columns: 1fr;
}
}
```
这个示例包括以下功能:
1. 整体的容器样式,设置背景颜色和阴影效果。
2. 照片网格布局,使用 CSS Grid 将照片按 3 列排列,并在小屏幕下自适应调整为 2 列和 1 列。
3. 照片样式,设置宽度为100%,高度自适应,并添加圆角效果。
4. 响应式设计,针对不同屏幕尺寸进行布局调整。
您可以根据实际需求对照片数量、样式等进行修改和调整。如果需要添加更多功能,如点击放大照片等,可以进一步完善 HTML 和 CSS 代码。
查看详情
查看详情