酒店管理系统前端示例代码 - 简单易懂的客房管理界面 - 常规

以下是一个简单的示例前端代码，用于实现酒店管理系统的前端界面：

<!DOCTYPE html>
<html>
<head>
    <title>酒店管理系统</title>
    <style>
        /* CSS 样式可以根据实际需求进行更改 */
        /* 样式示例，你可以根据需要自定义样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        nav {
            background-color: #333;
            color: #fff;
            padding: 10px;
        }
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            display: inline-block;
            margin-right: 10px;
        }
        main {
            padding: 20px;
        }
        .room-card {
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
        }
        /* 其他样式根据需要添加 */
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>首页</li>
            <li>客房管理</li>
            <li>预订</li>
            <li>入住/退房</li>
            <li>服务/设施</li>
            <li>账单</li>
        </ul>
    </nav>
    <main>
        <h1>客房管理</h1>
        <div class='room-card'>
            <h2>豪华套房</h2>
            <p>价格：$200/晚</p>
            <p>可用性：可预订</p>
            <button>预订</button>
        </div>
        <div class='room-card'>
            <h2>标准客房</h2>
            <p>价格：$100/晚</p>
            <p>可用性：已预订</p>
            <button disabled>已预订</button>
        </div>
        <!-- 其他客房卡片根据实际情况添加 -->
    </main>
</body>
</html>

请注意，这只是一个简单的示例代码，你可以根据实际需求进行修改和扩展。在实际开发中，你可能需要添加更多的HTML标记和CSS样式，以实现更完整和美观的前端界面。