/* styles.css */
body {
    font-family: Arial, sans-serif;
}
 
.card-nav {
    display: flex;
    justify-content: center; /* 水平居中 */
    gap: 20px; /* 卡片之间的间隙 */
    flex-wrap: wrap; /* 允许卡片换行 */
    padding: 20px;
}
 
.card {
    background-color: #f9f9f9; /* 卡片背景颜色 */
    border: 1px solid #ddd; /* 卡片边框 */
    border-radius: 8px; /* 卡片圆角 */
    padding: 20px; /* 卡片内部间距 */
    width: 200px; /* 卡片宽度 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 卡片阴影 */
    transition: transform 0.2s, box-shadow 0.2s; /* 过渡效果 */
}
 
.card:hover {
    transform: translateY(-5px); /* 鼠标悬停时上移 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 鼠标悬停时增加阴影 */
    cursor: pointer;
}