最近又写了一个静态网站，智慧酒店宣传官网。
使用的技术 html css js 。
特别适合编程学习者进行网页制作和前端开发的实践。
项目包含七个核心模块：首页、整体解决方案、优势、全国案例、行业观点、合作加盟、关于我们。
通过该项目，小伙伴们可以熟练掌握网页布局、样式设计、交互功能实现等前端开发技能！有兴趣的可以拿来学习一下。
首页html
<!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>
整体解决方案网页
<!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
源码下方，你懂的！
)