網頁程式碼(主頁)（初始版）:

不上火星不改名發表於2024-04-06
網頁

index.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="about:blank" 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>

styles.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規則不變 */

scripts.js

// 當卡片被點選時呼叫此函式
function onCardClick(cardIndex) {
    alert('卡片 ' + cardIndex + ' 被點選');
}

相關文章