智慧酒店企业站官网-前端静态网站模板【前端练习项目】

Json____2025-04-15 12:36

最近又写了一个静态网站，智慧酒店宣传官网。

使用的技术 html css js 。

特别适合编程学习者进行网页制作和前端开发的实践。

项目包含七个核心模块：首页、整体解决方案、优势、全国案例、行业观点、合作加盟、关于我们。

通过该项目，小伙伴们可以熟练掌握网页布局、样式设计、交互功能实现等前端开发技能！有兴趣的可以拿来学习一下。

首页html

bash 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品牌名智慧酒店</title>
    <link rel="stylesheet" href="assets/index.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="logo">
                <img src="assets/images/logo.svg" alt="品牌名智慧酒店">
            </div>
            <ul class="nav-links">
                <li><a href="index.html" class="active">首页</a></li>
                <li><a href="solution.html">整体解决方案</a></li>
                <li><a href="advantage.html">优势</a></li>
                <li><a href="cases.html">全国案例</a></li>
                <li><a href="insights.html">行业观点</a></li>
                <li><a href="join.html">合作加盟</a></li>
                <li><a href="about.html">关于我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <div class="hero-content">
                <h1>品牌名，懂营销的酒店PMS系统</h1>
                <p>0布线，不停业，节省70%成本</p>
            </div>
        </section>

        <section class="features">
            <div class="feature-container">
                <div class="feature-column left">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <img src="assets/images/checkin.svg" alt="10秒入住">
                        </div>
                        <h3>10秒入住</h3>
                        <p>智能快速办理入住，告别排队等待</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <img src="assets/images/extend.svg" alt="1键续住">
                        </div>
                        <h3>1键续住</h3>
                        <p>一键完成续住，方便快捷不打扰</p>
                    </div>
                </div>
                <div class="feature-column center">
                    <img src="assets/images/1.png" alt="智能酒店系统界面" class="phone-ui">
                </div>
                <div class="feature-column right">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <img src="assets/images/voice.svg" alt="24H语音管家">
                        </div>
                        <h3>24H语音管家</h3>
                        <p>全天候智能语音服务，随时解决需求</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <img src="assets/images/service.svg" alt="实时智能服务">
                        </div>
                        <h3>实时智能服务</h3>
                        <p>智能化服务系统，提供实时响应</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="feature-cards">
            <div class="card-container">
                <div class="card">
                    <div class="card-inner">
                        <div class="card-front">
                            <img src="assets/images/diamond.svg" alt="双品牌平台">
                            <h3>双品牌平台合力</h3>
                        </div>
                        <div class="card-back">
                            <p>大幅提高酒店入住率，实现品牌价值最大化</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-inner">
                        <div class="card-front">
                            <img src="assets/images/activity.svg" alt="小程序活动">
                            <h3>小程序活动直推</h3>
                        </div>
                        <div class="card-back">
                            <p>提高客户粘性，精准营销助力业务增长</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-inner">
                        <div class="card-front">
                            <img src="assets/images/free.svg" alt="免布线">
                            <h3>免布线</h3>
                        </div>
                        <div class="card-back">
                            <p>大幅降低安装成本，缩短工期，快速投入使用</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-inner">
                        <div class="card-front">
                            <img src="assets/images/product.svg" alt="多种增值产品">
                            <h3>多种增值产品</h3>
                        </div>
                        <div class="card-back">
                            <p>为酒店引流增收，提供多元化收入来源</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-inner">
                        <div class="card-front">
                            <img src="assets/images/smart.svg" alt="智慧酒店系统">
                            <h3>品牌名智慧酒店系统</h3>
                        </div>
                        <div class="card-back">
                            <p>会省钱也会赚钱的PMS，让酒店经营更智能</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="join-us">
            <div class="join-content">
                <h2>加入品牌名，一起分享未来的盛宴</h2>
                <p>品牌名，智慧酒店一站式整体解决方案服务商</p>
                <a href="#" class="cta-button">前往联系我们</a>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-left">
                <div class="contact-info">
                    <img src="assets/images/phone.svg" alt="客服电话" class="contact-icon">
                    <div class="contact-text">
                        <h4>客服电话</h4>
                        <p>400-xxx-4567</p>
                    </div>
                </div>
                <div class="company-address">
                    <img src="assets/images/location.svg" alt="公司地址" class="contact-icon">
                    <div class="contact-text">
                        <h4>公司地址</h4>
                        <p>北京市朝阳区XXXXB座</p>
                    </div>
                </div>
            </div>
            <div class="footer-center">
                <div class="footer-nav">
                    <div class="nav-column">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="#">公司简介</a></li>
                            <li><a href="#">发展历程</a></li>
                            <li><a href="#">新闻资讯</a></li>
                        </ul>
                    </div>
                    <div class="nav-column">
                        <h4>产品服务</h4>
                        <ul>
                            <li><a href="#">整体解决方案</a></li>
                            <li><a href="#">品牌优势</a></li>
                            <li><a href="#">成功案例</a></li>
                        </ul>
                    </div>
                    <div class="nav-column">
                        <h4>合作加盟</h4>
                        <ul>
                            <li><a href="#">加盟政策</a></li>
                            <li><a href="#">加盟流程</a></li>
                            <li><a href="#">加盟优势</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-right">
                <div class="qr-codes">
                    <div class="qr-code">
                        <img src="assets/images/miniprogram-qr.svg" alt="品牌名小程序">
                        <p>品牌名小程序</p>
                    </div>
                    <div class="qr-code">
                        <img src="assets/images/wechat-qr.svg" alt="关注品牌名酒店">
                        <p>关注品牌名酒店</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>©Copyright © 1990 All Rights Reserved xxxxxxxxxxxxxx有限公司版权所有</p>
            <p>xxx1000000000号 <img src="assets/images/beian.svg" alt="备案图标" class="beian-icon"></p>
        </div>
    </footer>

    <script src="assets/index.js"></script>
</body>
</html>

整体解决方案网页

bash 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整体解决方案 - 品牌名智慧酒店</title>
    <link rel="stylesheet" href="assets/index.css">
    <style>
        .section-title {
            text-align: center;
            font-size: 2em;
            margin: 50px 0 30px;
            color: #333;
        }

        .service-experience {
            padding: 80px 0;
            background-color: #fff;
        }

        .service-experience .section-title {
            text-align: center;
            font-size: 2em;
            margin-bottom: 60px;
            color: #2c3e50;
            position: relative;
        }

        .service-experience .section-title::before,
        .service-experience .section-title::after {
            content: '•';
            color: #4a90e2;
            margin: 0 10px;
        }

        .service-cards {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            gap: 30px;
            padding: 0 20px;
        }

        .service-card {
            flex: 1;
            text-align: center;
            padding: 20px;
            transition: transform 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-10px);
        }

        .service-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background-color: #e8f0fe;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .service-icon img {
            width: 40px;
            height: 40px;
        }

        .service-card h3 {
            font-size: 1.2em;
            color: #333;
            margin-bottom: 15px;
        }

        .service-card p {
            color: #666;
            font-size: 0.9em;
            line-height: 1.6;
        }

        .solution-hero {
            background-image: url('assets/images/3.jpg');
            background-size: cover;
            background-position: center;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            position: relative;
        }

        .solution-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
        }

        .solution-hero-content {
            position: relative;
            z-index: 1;
        }

        .solution-hero h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
        }

        .solution-hero p {
            font-size: 1.2em;
            max-width: 800px;
            margin: 0 auto;
        }

        .scene-modes {
            padding: 50px 0;
            background-color: #fff;
        }

        .scene-circle {
            position: relative;
            max-width: 1000px;
            height: 600px;
            margin: 0 auto;
        }

        .scene-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 2;
        }

        .scene-center img {
            width: 80px;
            height: 80px;
            margin-bottom: 10px;
        }

        .scene-items {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .scene-item {
            position: absolute;
            width: 200px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .scene-item:hover {
            transform: scale(1.1);
        }

        .scene-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 10px;
        }

        .scene-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .scene-item h3 {
            color: #333;
            margin-bottom: 10px;
        }

        .scene-item p {
            color: #666;
            line-height: 1.6;
        }
        .scene-item.romantic { top: 0; left: 50%; transform: translateX(-50%); }
        .scene-item.sleep { top: 50%; right: 0; transform: translateY(-50%); }
        .scene-item.welcome { bottom: 0; left: 50%; transform: translateX(-50%); }
        .scene-item.reading { top: 50%; left: 0; transform: translateY(-50%); }
        .scene-item.wakeup { top: 25%; left: 25%; }

        .pms-system {
            padding: 50px 0;
            background-color: #fff;
        }

        .pms-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            gap: 50px;
            align-items: center;
        }

        .pms-interface {
            flex: 1;
        }

        .pms-interface img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .pms-features {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        .feature-item {
            text-align: center;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }

        .feature-item:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 15px;
        }

        .feature-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .feature-item h3 {
            color: #333;
            margin-bottom: 10px;
            font-size: 1.2em;
        }

        .feature-item p {
            color: #666;
            font-size: 0.9em;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="logo">
                <img src="assets/images/logo.svg" alt="品牌名智慧酒店">
            </div>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="solution.html" class="active">整体解决方案</a></li>
                <li><a href="advantage.html">优势</a></li>
                <li><a href="cases.html">全国案例</a></li>
                <li><a href="insights.html">行业观点</a></li>
                <li><a href="join.html">合作加盟</a></li>
                <li><a href="about.html">关于我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="solution-hero">
            <div class="solution-hero-content">
                <h1>品牌名智慧酒店整体解决方案</h1>
                <p>双品牌平台，新零售赋能产品，为酒店引流增收</p>
            </div>
        </section>

        <section class="service-experience">
            <h2 class="section-title">极致的服务体验</h2>
            <div class="service-cards">
                <div class="service-card">
                    <div class="service-icon">
                        <img src="assets/images/convenient.svg" alt="以换代修">
                    </div>
                    <h3>以换代修</h3>
                    <p>无需等待维修，直接更换新设备，让您的酒店始终保持最佳状态</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <img src="assets/images/professional.svg" alt="专人培训">
                    </div>
                    <h3>专人培训</h3>
                    <p>专业团队提供全方位培训，确保系统高效运转</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <img src="assets/images/online.svg" alt="一站式营销服务">
                    </div>
                    <h3>一站式营销服务</h3>
                    <p>提供全方位的营销解决方案，助力酒店业务增长</p>
                </div>
            </div>
        </section>

        <section class="smart-control">
            <h2 class="section-title">八大智能客控系统</h2>
            <div class="control-grid">
                <div class="control-item">
                    <div class="control-image">
                        <img src="assets/images/smart-lighting.svg" alt="智能照明">
                    </div>
                    <h3>智能照明</h3>
                    <p>一键控制房间照明，智能调节亮度和色温</p>
                </div>
                <div class="control-item">
                    <div class="control-image">
                        <img src="assets/images/smart-ac.svg" alt="智能空调">
                    </div>
                    <h3>智能空调</h3>
                    <p>自动调节温度，打造舒适入住体验</p>
                </div>
                <div class="control-item">
                    <div class="control-image">
                        <img src="assets/images/smart-lock.svg" alt="智能门锁">
                    </div>
                    <h3>智能门锁</h3>
                    <p>安全便捷的智能门锁系统，支持多种开锁方式</p>
                </div>
                <div class="control-item">
                    <div class="control-image">
                        <img src="assets/images/smart-water.svg" alt="智能水表">
                    </div>
                    <h3>智能水表</h3>
                    <p>实时监控用水情况，智能化管理水资源</p>
                </div>
                <div class="control-item">
                    <div class="control-image">
                        <img src="assets/images/smart-speaker.svg" alt="智能音箱">
                    </div>
                    <h3>智能音箱</h3>
                    <p>语音控制房间设备，提供智能语音服务</p>
                </div>
                <div class="control-item">
                    <div class="control-image">
                        <img src="assets/images/smart-curtain.svg" alt="智能窗帘">
                    </div>
                    <h3>智能窗帘</h3>
                    <p>自动控制窗帘开合，智能调节室内光线</p>
                </div>
                <div class="control-item">
                    <div class="control-image">
                        <img src="assets/images/smart-tv.svg" alt="智能电视">
                    </div>
                    <h3>智能电视</h3>
                    <p>智能化娱乐系统，提供丰富的内容服务</p>
                </div>
                <div class="control-item">
                    <div class="control-image">
                        <img src="assets/images/smart-access.svg" alt="智能门禁">
                    </div>
                    <h3>智能门禁</h3>
                    <p>全方位安防系统，保障住客安全</p>
                </div>
            </div>
        </section>

        <section class="scene-modes">
            <h2 class="section-title">五种情景模式</h2>
            <div class="scene-circle">
                <div class="scene-center">
                    <img src="assets/images/smart.svg" alt="情景模式">
                    <h3>情景模式</h3>
                </div>
                <div class="scene-items">
                    <div class="scene-item romantic">
                        <div class="scene-icon">
                            <img src="assets/images/smart-lighting.svg" alt="浪漫模式">
                        </div>
                        <h3>浪漫模式</h3>
                        <p>柔和灯光，舒缓音乐，营造温馨氛围</p>
                    </div>
                    <div class="scene-item sleep">
                        <div class="scene-icon">
                            <img src="assets/images/smart-curtain.svg" alt="睡眠模式">
                        </div>
                        <h3>睡眠模式</h3>
                        <p>自动调节光线，温度，确保优质睡眠</p>
                    </div>
                    <div class="scene-item welcome">
                        <div class="scene-icon">
                            <img src="assets/images/smart-ac.svg" alt="欢迎模式">
                        </div>
                        <h3>欢迎模式</h3>
                        <p>灯光全开，空调预设，迎接宾客入住</p>
                    </div>
                    <div class="scene-item reading">
                        <div class="scene-icon">
                            <img src="assets/images/smart-tv.svg" alt="阅读模式">
                        </div>
                        <h3>阅读模式</h3>
                        <p>智能调节照明，打造舒适阅读环境</p>
                    </div>
                    <div class="scene-item wakeup">
                        <div class="scene-icon">
                            <img src="assets/images/smart-speaker.svg" alt="起床模式">
                        </div>
                        <h3>起床模式</h3>
                        <p>逐步调亮灯光，播放闹铃，轻松唤醒</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="pms-system">
            <h2 class="section-title">品牌名智慧酒店管理PMS系统</h2>
            <div class="pms-container">
                <div class="pms-interface">
                    <img src="assets/images/pms-interface.svg" alt="PMS系统界面">
                </div>
                <div class="pms-features">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <img src="assets/images/online.svg" alt="更联线">
                        </div>
                        <h3>更联线</h3>
                        <p>会员系统、系统实拍连锁管理，多门店会员数据互通，便于会员相互使用，助力二次营销。</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <img src="assets/images/professional.svg" alt="更专业">
                        </div>
                        <h3>更专业</h3>
                        <p>全方位支持高端酒店，进行多维度全程管理，步步管控，确保服务品质。</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <img src="assets/images/save.svg" alt="更省钱">
                        </div>
                        <h3>更省钱</h3>
                        <p>支持二级分销，助力商家把级实现10亿酒店用户广告收益，带来持续增长。</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <img src="assets/images/convenient.svg" alt="更便捷">
                        </div>
                        <h3>更便捷</h3>
                        <p>产品延广，设备、公寓、酒店、客房管理、客房清洁、收压、温泉等。</p>
                    </div>
                </div>
            </div>
        </section>

       

        <section class="join-us" style="background-image: url('assets/images/2.jpg'); background-size: cover; background-position: center; position: relative; color: #fff; padding: 80px 0; text-align: center;">
            <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5);"></div>
            <div class="join-content" style="position: relative; z-index: 1;">
                <h2 style="font-size: 2.5em; margin-bottom: 20px;">加入品牌名，一起分享未来的盛宴</h2>
                <p style="font-size: 1.2em; margin-bottom: 30px;">品牌名，智慧酒店一站式整体解决方案服务商</p>
                <a href="#" class="cta-button" style="display: inline-block; padding: 15px 40px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; font-size: 1.1em; transition: background-color 0.3s ease;">前往联系我们</a>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-left">
                <div class="contact-info">
                    <img src="assets/images/phone.svg" alt="客服电话" class="contact-icon">
                    <div class="contact-text">
                        <h4>客服电话</h4>
                        <p>400-xxx-4567</p>
                    </div>
                </div>
                <div class="company-address">
                    <img src="assets/images/location.svg" alt="公司地址" class="contact-icon">
                    <div class="contact-text">
                        <h4>公司地址</h4>
                        <p>北京市朝阳区XXXXB座</p>
                    </div>
                </div>
            </div>
            <div class="footer-center">
                <div class="footer-nav">
                    <div class="nav-column">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="#">公司简介</a></li>
                            <li><a href="#">发展历程</a></li>
                            <li><a href="#">新闻资讯</a></li>
                        </ul>
                    </div>
                    <div class="nav-column">
                        <h4>产品服务</h4>
                        <ul>
                            <li><a href="#">整体解决方案</a></li>
                            <li><a href="#">品牌优势</a></li>
                            <li><a href="#">成功案例</a></li>
                        </ul>
                    </div>
                    <div class="nav-column">
                        <h4>合作加盟</h4>
                        <ul>
                            <li><a href="#">加盟政策</a></li>
                            <li><a href="#">加盟流程</a></li>
                            <li><a href="#">加盟优势</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-right">
                <div class="qr-codes">
                    <div class="qr-code">
                        <img src="assets/images/miniprogram-qr.svg" alt="品牌名小程序">
                        <p>品牌名小程序</p>
                    </div>
                    <div class="qr-code">
                        <img src="assets/images/wechat-qr.svg" alt="关注品牌名酒店">
                        <p>关注品牌名酒店</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>©Copyright © 1990 All Rights Reserved xxxxxxxxxxxxxx有限公司版权所有</p>
            <p>xxx1000000000号 <img src="assets/images/beian.svg" alt="备案图标" class="beian-icon"></p>
        </div>
    </footer>

    <script src="assets/index.js"></script>
</body>
</html>

我也把网站部署了上线，大家有兴趣可以去看看。

预览地址：https://test.wwwoop.com/?s=hotel-html&no=zhihuijiudian

源码下方，你懂的！

相关推荐
徐小夕27 分钟前
花了2个月时间研究了市面上的4款开源表格组件，崩溃了，决定自己写一款
前端·javascript·react.js
by————组态1 小时前
低代码 Web 组态
前端·人工智能·物联网·低代码·数学建模·组态
拉不动的猪1 小时前
UniApp金融理财产品项目简单介绍
前端·javascript·面试
菜冬眠。1 小时前
uni-app/微信小程序接入腾讯位置服务地图选点插件
前端·微信小程序·uni-app
jayson.h1 小时前
pdf解密程序
java·前端·pdf
萌萌哒草头将军1 小时前
😡😡😡早知道有这两个 VueRouter 增强插件，我还加什么班！🚀🚀🚀
前端·vue.js·vue-router
苏卫苏卫苏卫1 小时前
【Vue】案例——To do list：
开发语言·前端·javascript·vue.js·笔记·list
0509152 小时前
测试基础笔记第四天（html）
前端·笔记·html
聪明的墨菲特i2 小时前
React与Vue：哪个框架更适合入门？
开发语言·前端·javascript·vue.js·react.js
时光少年2 小时前
Android 副屏录制方案
android·前端
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03DeepSeek各版本说明与优缺点分析04Scipy||第三章 线性代数 (scipy.linalg)05DeepSeek RAGFlow构建本地知识库系统06如何在WPS和Word/Excel中直接使用DeepSeek功能07ZNS SSD垃圾回收优化方案解读-108汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10C#/.NET/.NET Core技术前沿周刊 | 第 34 期（2025年4.7-4.13）