建立一個簡單的小程式

OpenSNN發表於2024-06-26

要建立一個簡單的住宿預訂小程式，你需要HTML來構建頁面結構，CSS來設計頁面樣式，以及可能還需要一些JavaScript來實現互動功能。以下是一個簡單的示例，它包含了一個住宿列表的頁面佈局和樣式。

首先，這是HTML部分的結構：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Accommodation Booking</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to Our Accommodation</h1>
    </header>
    <main>
        <section class="accommodation-list">
            <div class="accommodation-item">
                <img src="accommodation1.jpg" alt="Accommodation 1">
                <h2>Beautiful Room with Sea View</h2>
                <p>Description of the room goes here...</p>
                <button>Book Now</button>
            </div>
            <div class="accommodation-item">
                <img src="accommodation2.jpg" alt="Accommodation 2">
                <h2>Spacious Apartment with City View</h2>
                <p>Description of the apartment goes here...</p>
                <button>Book Now</button>
            </div>
            <!-- 更多住宿專案 -->
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Simple Accommodation Booking</p>
    </footer>
</body>
</html>

接下來是CSS樣式（儲存為styles.css）：

/* 重置瀏覽器預設樣式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 頁面佈局樣式 */
body {
    font-family: Arial, sans-serif;
}

header, main, footer {
    text-align: center;
    margin: 20px;
}

.accommodation-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.accommodation-item {
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.accommodation-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.accommodation-item h2 {
    margin: 10px;
    font-size: 1.2em;
}

.accommodation-item p {
    margin: 10px;
    padding: 0 10px;
    text-align: justify;
}

.accommodation-item button {
    margin: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

footer {
    background-color: #f8f8f8;
    padding: 10px 0;
}

在這個示例中，我們建立了一個簡單的頁面，其中包含一個住宿列表。每個住宿專案都包括一個圖片、標題、描述和一個預訂按鈕。頁面使用了Flexbox進行佈局，使得住宿專案在不同螢幕大小下都能夠以合適的形式展示。

請注意，這個示例沒有包含JavaScript互動部分，因為這通常涉及到更復雜的邏輯，如處理預訂表單提交等。如果你需要實現這些互動功能，請告訴我，我將為你提供相應的JavaScript程式碼示例。
原文連結：https://www.opensnn.com/os/article/10000901

相關文章