主页修改前存档
1.html：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI服务平台</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="grid-container"> <!-- 卡片1 --> <a href="file:///C:/Users/Admin/Desktop/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91(yingyong)/%E8%AF%A6%E6%83%85%E5%BA%94%E7%94%A8%E9%A1%B5/index.html" target="_blank" class="card"> <img class="card-image" src="图片集合/1.png" alt="AI视觉创作"> <div class="card-content"> <h3>AI视觉创作</h3> <p>一键生成独特的视觉作品和元素</p> </div> </a> <!-- 卡片2 --> <a href="about:blank" target="_blank" class="card"> <img class="card-image" src="图片集合/2.png" alt="AI建筑设计"> <div class="card-content"> <h3>AI建筑设计</h3> <p>智能AI设计方案，帮助您实现梦想中的家</p> </div> </a> <a href="about:blank" target="_blank" class="card"> <img class="card-image" src="图片集合/3.png" alt="AI视觉创作"> <div class="card-content"> <h3>AI视觉创作</h3> <p>一键生成独特的视觉作品和元素</p> </div> </a> <!-- 卡片2 --> <a href="about:blank" target="_blank" class="card"> <img class="card-image" src="图片集合/4.png" alt="AI建筑设计"> <div class="card-content"> <h3>AI建筑设计</h3> <p>智能AI设计方案，帮助您实现梦想中的家</p> </div> </a> <a href="about:blank" target="_blank" class="card"> <img class="card-image" src="图片集合/5.png" alt="AI视觉创作"> <div class="card-content"> <h3>AI视觉创作</h3> <p>一键生成独特的视觉作品和元素</p> </div> </a> <!-- 卡片2 --> <a href="about:blank" target="_blank" class="card"> <img class="card-image" src="图片集合/6.png" alt="AI建筑设计"> <div class="card-content"> <h3>AI建筑设计</h3> <p>智能AI设计方案，帮助您实现梦想中的家</p> </div> </a> <a href="about:blank" target="_blank" class="card"> <img class="card-image" src="图片集合/7.png" alt="AI视觉创作"> <div class="card-content"> <h3>AI视觉创作</h3> <p>一键生成独特的视觉作品和元素</p> </div> </a> <!-- 卡片2 --> <a href="about:blank" target="_blank" class="card"> <img class="card-image" src="图片集合/8.png" alt="AI建筑设计"> <div class="card-content"> <h3>AI建筑设计</h3> <p>智能AI设计方案，帮助您实现梦想中的家</p> </div> </a> <!-- 更多卡片 --> <!-- ... 其他卡片 ... --> </div> <script src="script.js"></script> </body> </html>
css代码;
body, html { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f4f4; /* 根据您的设计调整背景色 */ } .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); /* 创建四列 */ gap: 20px; /* 设置卡片之间的间隔 */ padding: 20px; /* 在网格外部的空间 */ max-width: 1200px; /* 或者您希望的最大宽度 */ margin: auto; /* 水平居中 */ } .card { background-color: #ffffff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: hidden; cursor: pointer; transition: transform 0.2s ease-in-out; display: flex; flex-direction: column; align-items: center; } .card:hover { transform: scale(1.03); } .card-image { width: 100%; /* 图片宽度为卡片的100% */ height: auto; /* 保持图片的原始宽高比 */ max-height:150px; /* 控制图片的显示高度 */ object-fit: cover; /* 图片将填满容器，但可能会被裁剪 */ border-top-left-radius: 10px; /* 图片上方的圆角 */ border-top-right-radius: 10px; } .card-content { padding: 10px; text-align: center; flex: 1; /* 让内容区域填充剩余空间 */ } .card h3 { margin-top: 10px; /* 标题与图片之间的间隔 */ color: #333; } .card p { color: #666; } @media (max-width: 1024px) { .grid-container { grid-template-columns: repeat(2, 1fr); /* 在较小屏幕上创建两列 */ } } @media (max-width: 768px) { .grid-container { grid-template-columns: 1fr; /* 在最小屏幕上创建一列 */ padding: 10px; } } /* 其他样式保持不变 */ .card, .card:link, .card:visited, .card:hover, .card:active { text-decoration: none; /* 移除下划线 */ color: inherit; /* 保留继承的文字颜色 */ } /* 继续保持您原有的CSS规则不变 */
javascript
// 当卡片被点击时调用此函数 function onCardClick(cardIndex) { alert('卡片 ' + cardIndex + ' 被点击'); }
