html网页咖啡馆模板源码码-网站模板-锦华智联科技

响应式设计：在手机、平板和电脑上都能完美显示。
现代美观：使用了流行的设计风格，包括卡片布局、柔和的阴影和清晰的排版。
功能模块齐全：包含了咖啡馆网站常见的所有部分：首页、菜单、关于我们、联系方式等。
代码清晰：HTML、CSS 和 JavaScript 分离，注释清晰,易于理解和修改。

如何使用这个模板？

创建文件：在您的电脑上创建一个文件夹，cafe-website,在该文件夹中创建以下三个文件：
（图片来源网络，侵删）
- index.html
- style.css
- script.js
复制代码：将下面提供的代码分别复制到对应的文件中。
添加图片：您需要准备一些图片并放在一个名为 images 的子文件夹里,请按以下命名规则替换图片路径：
- images/hero-bg.jpg (用于首页顶部的背景图)
- images/logo.png (您的咖啡馆 logo)
- images/coffee1.jpg, images/coffee2.jpg (菜单项图片)
- images/about-img.jpg (关于我们部分的图片)
- images/contact-img.jpg (联系方式部分的图片)
打开网页：用浏览器打开 index.html 文件,您就可以看到效果了。

HTML 源码 (`index.html`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">悠然咖啡馆 - 您的城市绿洲</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入字体图标库 (Font Awesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <a href="#" class="logo"><img src="images/logo.png" alt="悠然咖啡馆 Logo"></a>
        <nav class="navbar">
            <a href="#home" class="active">首页</a>
            <a href="#menu">菜单</a>
            <a href="#about">关于我们</a>
            <a href="#contact">联系我们</a>
        </nav>
        <div class="icons">
            <i class="fas fa-search" id="search-icon"></i>
            <i class="fas fa-heart"></i>
            <i class="fas fa-shopping-cart"></i>
        </div>
    </header>
    <!-- 首页横幅 -->
    <section class="home" id="home">
        <div class="content">
            <h3>品味生活，从一杯咖啡开始</h3>
            <p>精选世界各地的优质咖啡豆，为您带来最醇正的味觉体验。</p>
            <a href="#menu" class="btn">立即点单</a>
        </div>
    </section>
    <!-- 特色服务 -->
    <section class="features" id="features">
        <h1 class="heading">我们的特色</h1>
        <div class="box-container">
            <div class="box">
                <i class="fas fa-coffee"></i>
                <h3>100% 阿拉比卡咖啡豆</h3>
                <p>我们只选用最高品质的阿拉比卡咖啡豆，确保每一杯咖啡都香醇浓郁。</p>
            </div>
            <div class="box">
                <i class="fas fa-leaf"></i>
                <h3>有机与可持续</h3>
                <p>支持公平贸易，与可持续发展的农场合作，为地球和社区贡献力量。</p>
            </div>
            <div class="box">
                <i class="fas fa-hands"></i>
                <h3>专业咖啡师</h3>
                <p>我们的咖啡师都经过严格的专业培训，为您呈现完美的咖啡艺术。</p>
            </div>
        </div>
    </section>
    <!-- 菜单部分 -->
    <section class="menu" id="menu">
        <h1 class="heading">精选菜单</h1>
        <div class="box-container">
            <div class="box">
                <img src="images/coffee1.jpg" alt="拿铁">
                <h3>经典拿铁</h3>
                <div class="price">¥28 <span>¥35</span></div>
                <p>浓郁的意式浓缩与丝滑牛奶的完美融合，口感顺滑，回味无穷。</p>
                <a href="#" class="btn">加入购物车</a>
            </div>
            <div class="box">
                <img src="images/coffee2.jpg" alt="美式咖啡">
                <h3>美式咖啡</h3>
                <div class="price">¥22 <span>¥28</span></div>
                <p>纯粹的黑咖啡，唤醒您的每一个清晨，简单而不失风味。</p>
                <a href="#" class="btn">加入购物车</a>
            </div>
            <div class="box">
                <img src="images/coffee1.jpg" alt="卡布奇诺">
                <h3>卡布奇诺</h3>
                <div class="price">¥26 <span>¥32</span></div>
                <p>浓缩咖啡、蒸汽牛奶和奶泡的经典组合，层次丰富，香气四溢。</p>
                <a href="#" class="btn">加入购物车</a>
            </div>
            <div class="box">
                <img src="images/coffee2.jpg" alt="摩卡">
                <h3>巧克力摩卡</h3>
                <div class="price">¥30 <span>¥38</span></div>
                <p>咖啡与巧克力的甜蜜邂逅，顶部点缀着鲜奶油，是甜食爱好者的最爱。</p>
                <a href="#" class="btn">加入购物车</a>
            </div>
        </div>
    </section>
    <!-- 关于我们 -->
    <section class="about" id="about">
        <div class="image">
            <img src="images/about-img.jpg" alt="关于我们">
        </div>
        <div class="content">
            <h1 class="heading">关于我们</h1>
            <p>悠然咖啡馆创立于2010年，源于一个简单的梦想：为城市中的人们提供一个可以放松、交流、享受片刻宁静的“第三空间”，我们相信，一杯好咖啡能连接人与人，也能点亮一天的好心情。</p>
            <p>从豆子的甄选到烘焙的每一个细节，再到手冲的专注，我们倾注了全部的热情与匠心，希望您在这里不仅能品尝到美味的咖啡，更能感受到家的温暖与惬意。</p>
            <a href="#" class="btn">了解更多</a>
        </div>
    </section>
    <!-- 联系我们 -->
    <section class="contact" id="contact">
        <div class="image">
            <img src="images/contact-img.jpg" alt="联系我们">
        </div>
        <div class="content">
            <h1 class="heading">联系我们</h1>
            <p>我们期待您的光临！如果您有任何问题或建议，请随时与我们联系。</p>
            <div class="info">
                <i class="fas fa-map-marker-alt"></i>
                <p>北京市朝阳区三里屯路19号<br>三里屯太古里南区S4-31</p>
            </div>
            <div class="info">
                <i class="fas fa-phone"></i>
                <p>010-1234-5678</p>
            </div>
            <div class="info">
                <i class="fas fa-envelope"></i>
                <p>hello@your-cafe.com</p>
            </div>
            <div class="info">
                <i class="fas fa-clock"></i>
                <p>周一至周五: 8:00 - 22:00<br>周六至周日: 9:00 - 23:00</p>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="share">
            <a href="#" class="fab fa-facebook-f"></a>
            <a href="#" class="fab fa-twitter"></a>
            <a href="#" class="fab fa-instagram"></a>
            <a href="#" class="fab fa-linkedin"></a>
        </div>
        <div class="credit">
            由 <span>您的名字</span> | 使用 HTML & CSS 构建
        </div>
    </footer>
    <!-- JavaScript 文件 -->
    <script src="script.js"></script>
</body>
</html>

CSS 源码 (`style.css`)

/* 全局样式重置和变量定义 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');
:root {
    --black: #333;
    --light-color: #666;
    --box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    --border: .1rem solid rgba(0,0,0,.1);
}
* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    transition: all .2s linear;
}
html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
section {
    padding: 2rem 9%;
}
.heading {
    text-align: center;
    font-size: 3.5rem;
    color: var(--black);
    padding-bottom: 2rem;
    text-transform: uppercase;
}
.btn {
    display: inline-block;
    margin-top: 1rem;
    padding: .8rem 3rem;
    background: var(--black);
    color: #fff;
    font-size: 1.7rem;
    cursor: pointer;
    border-radius: .5rem;
}
.btn:hover {
    background: #444;
    letter-spacing: .1rem;
}
/* 导航栏样式 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: var(--box-shadow);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 9%;
}
.header .logo {
    font-size: 2.5rem;
    font-weight: bolder;
    color: var(--black);
}
.header .logo img {
    height: 3rem;
}
.header .navbar a {
    font-size: 1.7rem;
    color: var(--black);
    margin: 0 1rem;
}
.header .navbar a:hover {
    color: #ff9800;
}
.header .icons i {
    font-size: 2.5rem;
    color: var(--black);
    margin-left: 1.5rem;
    cursor: pointer;
}
.header .icons i:hover {
    color: #ff9800;
}
/* 首页横幅样式 */
.home {
    background: url('images/hero-bg.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home .content {
    text-align: center;
    max-width: 60rem;
}
.home .content h3 {
    font-size: 4rem;
    color: #fff;
    text-transform: uppercase;
}
.home .content p {
    font-size: 1.7rem;
    color: #fff;
    padding: 1rem 0;
}
/* 特色服务样式 */
.features .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.5rem;
}
.features .box {
    background: #fff;
    border: var(--border);
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    padding: 2rem;
    text-align: center;
}
.features .box i {
    font-size: 4rem;
    color: #ff9800;
    margin-bottom: 1.5rem;
}
.features .box h3 {
    font-size: 2rem;
    color: var(--black);
}
.features .box p {
    font-size: 1.5rem;
    color: var(--light-color);
    padding: 1rem 0;
}
/* 菜单样式 */
.menu .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.5rem;
}
.menu .box {
    background: #fff;
    border: var(--border);
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    overflow: hidden;
}
.menu .box img {
    height: 25rem;
    width: 100%;
    object-fit: cover;
}
.menu .box .content {
    padding: 1.5rem;
}
.menu .box .content h3 {
    font-size: 2rem;
    color: var(--black);
}
.menu .box .content .price {
    font-size: 2.5rem;
    color: #ff9800;
    font-weight: bolder;
    margin: .5rem 0;
}
.menu .box .content .price span {
    font-size: 1.5rem;
    color: var(--light-color);
    text-decoration: line-through;
}
.menu .box .content p {
    font-size: 1.5rem;
    color: var(--light-color);
    padding: 1rem 0;
}
/* 关于我们和联系我们样式 */
.about .image, .contact .image {
    flex: 1 1 40rem;
}
.about .content, .contact .content {
    flex: 1 1 40rem;
}
.about .image img, .contact .image img {
    width: 100%;
    height: 50rem;
    object-fit: cover;
}
.about .content h1, .contact .content h1 {
    font-size: 3rem;
    color: var(--black);
}
.about .content p, .contact .content p {
    font-size: 1.5rem;
    color: var(--light-color);
    padding: 1rem 0;
}
.about .content .btn, .contact .content .btn {
    margin-top: 0;
}
.contact .info {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem 0;
    margin-top: 1rem;
}
.contact .info i {
    font-size: 2.5rem;
    color: #ff9800;
}
.contact .info h3 {
    font-size: 1.5rem;
    color: var(--black);
}
.contact .info p {
    font-size: 1.5rem;
    color: var(--light-color);
}
/* 页脚样式 */
.footer {
    background: #333;
    text-align: center;
    color: #fff;
    padding: 2rem;
}
.footer .share {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.footer .share a {
    height: 4rem;
    width: 4rem;
    line-height: 4rem;
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 1.7rem;
}
.footer .share a:hover {
    background: #ff9800;
    color: #fff;
}
.footer .credit {
    font-size: 1.5rem;
    color: #fff;
}
.footer .credit span {
    color: #ff9800;
}
/* 响应式设计 */
@media (max-width: 768px) {
    html {
        font-size: 55%;
    }
    .header {
        padding: 2rem;
    }
    section {
        padding: 2rem;
    }
    .home .content h3 {
        font-size: 3rem;
    }
}

JavaScript 源码 (`script.js`)

// 等待整个HTML文档加载完成后再执行脚本
window.addEventListener('DOMContentLoaded', () => {
    // 获取所有导航链接
    const navLinks = document.querySelectorAll('.navbar a');
    // 获取当前页面的URL的哈希值（index.html#menu 的哈希值是 "#menu"）
    const currentPath = window.location.hash;
    // 如果有哈希值，则激活对应的导航链接
    if (currentPath) {
        navLinks.forEach(link => {
            // 检查链接的href属性是否与当前哈希值匹配
            if (link.getAttribute('href') === currentPath) {
                // 移除所有链接的 'active' 类
                navLinks.forEach(l => l.classList.remove('active'));
                // 给匹配的链接添加 'active' 类
                link.classList.add('active');
            }
        });
    }
    // 为每个导航链接添加点击事件监听器
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            // 移除所有链接的 'active' 类
            navLinks.forEach(l => l.classList.remove('active'));
            // 给被点击的链接添加 'active' 类
            link.classList.add('active');
        });
    });
    // 搜索图标点击事件（示例功能）
    const searchIcon = document.getElementById('search-icon');
    searchIcon.addEventListener('click', () => {
        alert('搜索功能开发中...');
    });
    // 购物车图标点击事件（示例功能）
    const cartIcon = document.querySelector('.fa-shopping-cart');
    cartIcon.addEventListener('click', () => {
        alert('您的购物车是空的！');
    });
    // 心形图标点击事件（示例功能）
    const heartIcon = document.querySelector('.fa-heart');
    heartIcon.addEventListener('click', () => {
        heartIcon.classList.toggle('fas'); // 切换实心/空心
        alert('已添加到收藏夹！');
    });
    // “加入购物车”按钮点击事件
    const addToCartButtons = document.querySelectorAll('.menu .box .btn');
    addToCartButtons.forEach(button => {
        button.addEventListener('click', (e) => {
            e.preventDefault(); // 阻止默认的链接跳转行为
            const coffeeName = button.parentElement.querySelector('h3').textContent;
            alert(`"${coffeeName}" 已加入购物车！`);
        });
    });
});

扩展建议

这个模板是一个很好的起点,您可以根据自己的需求进行扩展：

（图片来源网络，侵删）

后台管理系统：可以为菜单、订单等添加一个简单的后台管理界面,方便更新内容。
在线支付集成：集成支付宝、微信支付等,实现真正的在线点单和支付功能。
博客/新闻模块：增加一个博客板块，发布咖啡文化、新品介绍等内容。
会员系统：建立会员积分、储值、优惠券等功能,增加用户粘性。
图片画廊：添加一个展示咖啡馆环境、活动照片的画廊页面。

希望这个模板能对您有所帮助！

（图片来源网络，侵删）

html网页咖啡馆模板源码码

如何使用这个模板？

HTML 源码 (index.html)

CSS 源码 (style.css)

JavaScript 源码 (script.js)

扩展建议

HTML 源码 (`index.html`)

CSS 源码 (`style.css`)

JavaScript 源码 (`script.js`)