原创设计一个简单的住宿小程序

虚拟行者阅读量 54

要创建一个简单的住宿预订小程序，你需要HTML来构建页面结构，CSS来设计页面样式，以及可能还需要一些JavaScript来实现交互功能。以下是一个简单的示例，它包含了一个住宿列表的页面布局和样式。

首先，这是HTML部分的结构：

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）：

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代码示例。

标签： px样式页面marginaccommodation-item
1
1
0/300
全部评论0
0/300