最近又寫了一個靜態網站，智慧酒店宣傳官網。
使用的技術 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
源碼下方，你懂的！
)