搜索
织梦建站

HTML零食网站织梦模板如何使用？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 5 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 101 分钟
位置： 首页 › 织梦建站 › 正文

这个模板将模仿织梦CMS的标签化、模块化思想，即使不依赖PHP后端，也能通过纯前端代码实现一个功能完整、易于维护的静态网站。

用html做的零食网站织梦模板
（图片来源网络，侵删）

模板设计思路

  1. 结构清晰：采用经典的 header、nav、main、footer 结构。
  2. 模块化：将网站划分为独立的模块，如导航栏、轮播图、产品列表、页脚等，每个模块都可以轻松地被修改或替换。
  3. 响应式设计：使用 CSS Flexbox 和 Grid，并配合媒体查询，确保网站在桌面、平板和手机上都有良好的显示效果。
  4. 交互体验：添加简单的 JavaScript 交互，如轮播图、购物车计数、回到顶部按钮等，提升用户体验。
  5. “织梦”风格：通过注释清晰地标识每个部分，方便您理解和修改，就像在编辑织梦CMS的模板文件一样。

文件结构

为了方便管理,我们创建一个标准的网站文件夹结构：

snack-store/
├── index.html          # 主页面
├── css/
│   └── style.css       # 所有样式文件
├── js/
│   └── main.js         # 所有JavaScript脚本
├── images/
│   ├── logo.png        # 网站Logo
│   ├── banner-1.jpg    # 轮播图1
│   ├── banner-2.jpg    # 轮播图2
│   └── products/       # 产品图片文件夹
│       ├── chips.jpg
│       ├── chocolate.jpg
│       └── nuts.jpg
└── fonts/              # (可选) 存放自定义字体

第1步：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>
    <meta name="description" content="精选全球美味零食，从薯片到巧克力，应有尽有，快速配送，品质保证！">
    <link rel="stylesheet" href="css/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>
    <!-- ====================== 顶部栏 ====================== -->
    <div class="top-bar">
        <div class="container">
            <span class="welcome">欢迎来到美味零食坊！</span>
            <div class="top-links">
                <a href="#"><i class="fas fa-user"></i> 登录</a>
                <a href="#"><i class="fas fa-heart"></i> 收藏</a>
                <a href="#"><i class="fas fa-shopping-cart"></i> 购物车 <span class="cart-count">0</span></a>
            </div>
        </div>
    </div>
    <!-- ====================== 导航栏 ====================== -->
    <header class="main-header">
        <div class="container">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt="美味零食坊"></a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">全部商品</a></li>
                    <li><a href="#">新品上市</a></li>
                    <li><a href="#">热销排行</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- ====================== 轮播图 ====================== -->
    <section class="banner">
        <div class="banner-slider">
            <div class="slide active">
                <img src="images/banner-1.jpg" alt="美味零食1">
                <div class="banner-content">
                    <h2>探索全球美味</h2>
                    <p>精选世界各地特色零食，让您足不出户尝遍全球风味。</p>
                    <a href="#" class="btn">立即选购</a>
                </div>
            </div>
            <div class="slide">
                <img src="images/banner-2.jpg" alt="美味零食2">
                <div class="banner-content">
                    <h2>新品上市</h2>
                    <p>夏日限定冰品，清爽一夏，快来尝鲜吧！</p>
                    <a href="#" class="btn">立即选购</a>
                </div>
            </div>
        </div>
        <button class="slider-btn prev"><i class="fas fa-chevron-left"></i></button>
        <button class="slider-btn next"><i class="fas fa-chevron-right"></i></button>
        <div class="dots"></div>
    </section>
    <!-- ====================== 主要内容区 ====================== -->
    <main class="main-content">
        <div class="container">
            <!-- ====================== 产品分类 ====================== -->
            <section class="categories">
                <h2 class="section-title">热门分类</h2>
                <div class="category-grid">
                    <a href="#" class="category-item">
                        <img src="https://via.placeholder.com/150x150?text=膨化食品" alt="膨化食品">
                        <span>膨化食品</span>
                    </a>
                    <a href="#" class="category-item">
                        <img src="https://via.placeholder.com/150x150?text=坚果炒货" alt="坚果炒货">
                        <span>坚果炒货</span>
                    </a>
                    <a href="#" class="category-item">
                        <img src="https://via.placeholder.com/150x150?text=糖果巧克力" alt="糖果巧克力">
                        <span>糖果巧克力</span>
                    </a>
                    <a href="#" class="category-item">
                        <img src="https://via.placeholder.com/150x150?text=肉干肉脯" alt="肉干肉脯">
                        <span>肉干肉脯</span>
                    </a>
                </div>
            </section>
            <!-- ====================== 热门商品 ====================== -->
            <section class="featured-products">
                <h2 class="section-title">热门商品</h2>
                <div class="product-grid">
                    <!-- 产品项 1 -->
                    <div class="product-card">
                        <div class="product-img">
                            <img src="images/products/chips.jpg" alt="乐事薯片">
                            <div class="product-actions">
                                <a href="#" class="add-to-cart-btn"><i class="fas fa-shopping-cart"></i></a>
                                <a href="#" class="add-to-wishlist-btn"><i class="far fa-heart"></i></a>
                            </div>
                        </div>
                        <div class="product-info">
                            <h3>经典原味薯片</h3>
                            <p class="price">¥15.90</p>
                        </div>
                    </div>
                    <!-- 产品项 2 -->
                    <div class="product-card">
                        <div class="product-img">
                            <img src="images/products/chocolate.jpg" alt="德芙巧克力">
                            <div class="product-actions">
                                <a href="#" class="add-to-cart-btn"><i class="fas fa-shopping-cart"></i></a>
                                <a href="#" class="add-to-wishlist-btn"><i class="far fa-heart"></i></a>
                            </div>
                        </div>
                        <div class="product-info">
                            <h3>丝滑牛奶巧克力</h3>
                            <p class="price">¥28.00</p>
                        </div>
                    </div>
                    <!-- 产品项 3 -->
                    <div class="product-card">
                        <div class="product-img">
                            <img src="images/products/nuts.jpg" alt="每日坚果">
                            <div class="product-actions">
                                <a href="#" class="add-to-cart-btn"><i class="fas fa-shopping-cart"></i></a>
                                <a href="#" class="add-to-wishlist-btn"><i class="far fa-heart"></i></a>
                            </div>
                        </div>
                        <div class="product-info">
                            <h3>每日混合坚果</h3>
                            <p class="price">¥45.00</p>
                        </div>
                    </div>
                    <!-- 产品项 4 -->
                    <div class="product-card">
                        <div class="product-img">
                            <img src="https://via.placeholder.com/200x200?text=饼干" alt="进口饼干">
                            <div class="product-actions">
                                <a href="#" class="add-to-cart-btn"><i class="fas fa-shopping-cart"></i></a>
                                <a href="#" class="add-to-wishlist-btn"><i class="far fa-heart"></i></a>
                            </div>
                        </div>
                        <div class="product-info">
                            <h3>进口黄油曲奇</h3>
                            <p class="price">¥35.80</p>
                        </div>
                    </div>
                </div>
            </section>
            <!-- ====================== 特色服务 ====================== -->
            <section class="features">
                <div class="feature-item">
                    <i class="fas fa-truck"></i>
                    <h4>全场包邮</h4>
                    <p>满99元免运费</p>
                </div>
                <div class="feature-item">
                    <i class="fas fa-shield-alt"></i>
                    <h4>品质保证</h4>
                    <p>严选优质商品</p>
                </div>
                <div class="feature-item">
                    <i class="fas fa-undo"></i>
                    <h4>7天退换</h4>
                    <p>无忧购物体验</p>
                </div>
                <div class="feature-item">
                    <i class="fas fa-headset"></i>
                    <h4>在线客服</h4>
                    <p>24小时为您服务</p>
                </div>
            </section>
        </div>
    </main>
    <!-- ====================== 页脚 ====================== -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-about">
                <h3>关于美味零食坊</h3>
                <p>我们致力于为您提供最新鲜、最美味、最有趣的零食，从国内经典到海外网红，我们为您一一搜罗。</p>
            </div>
            <div class="footer-links">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">配送方式</a></li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">售后服务</a></li>
                </ul>
            </div>
            <div class="footer-contact">
                <h3>联系我们</h3>
                <p><i class="fas fa-map-marker-alt"></i> 北京市朝阳区美食街123号</p>
                <p><i class="fas fa-phone"></i> 400-123-4567</p>
                <p><i class="fas fa-envelope"></i> service@snackstore.com</p>
            </div>
            <div class="footer-social">
                <h3>关注我们</h3>
                <a href="#"><i class="fab fa-weixin"></i></a>
                <a href="#"><i class="fab fa-weibo"></i></a>
                <a href="#"><i class="fab fa-tiktok"></i></a>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 美味零食坊 版权所有.</p>
        </div>
    </footer>
    <!-- 回到顶部按钮 -->
    <a href="#" class="back-to-top"><i class="fas fa-arrow-up"></i></a>
    <!-- 引入JavaScript -->
    <script src="js/main.js"></script>
</body>
</html>

第2步：CSS 样式 (css/style.css)

这是网站的“皮肤”，负责美化所有元素，并实现响应式布局。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #ff6b35; /* 主色调，橙色 */
    --secondary-color: #f4a261; /* 次要色调 */
    --text-color: #333;
    --light-gray: #f4f4f4;
    --dark-gray: #777;
    --white: #fff;
    --box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Arial', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #f9f9f9;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
a {
    text-decoration: none;
    color: inherit;
}
ul {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
}
.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5rem;
    color: var(--primary-color);
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--primary-color);
}
.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: #e55a2b;
}
/* --- 顶部栏 --- */
.top-bar {
    background-color: #333;
    color: var(--white);
    padding: 8px 0;
    font-size: 0.9rem;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-links a {
    color: var(--white);
    margin-left: 20px;
    transition: color 0.3s ease;
}
.top-links a:hover {
    color: var(--primary-color);
}
.cart-count {
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.8rem;
    margin-left: 5px;
}
/* --- 导航栏 --- */
.main-header {
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}
.logo img {
    height: 50px;
}
.main-nav ul {
    display: flex;
}
.main-nav ul li {
    margin-left: 30px;
}
.main-nav a {
    font-weight: bold;
    color: var(--text-color);
    transition: color 0.3s ease;
    position: relative;
}
.main-nav a:hover, .main-nav a.active {
    color: var(--primary-color);
}
.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
}
/* --- 轮播图 --- */
.banner {
    position: relative;
    height: 500px;
    overflow: hidden;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.slide.active {
    opacity: 1;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner-content {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    color: var(--white);
    max-width: 500px;
}
.banner-content h2 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    color: #333;
    transition: background-color 0.3s ease;
}
.slider-btn:hover {
    background-color: var(--white);
}
.prev { left: 20px; }
.next { right: 20px; }
/* --- 主要内容区 --- */
.main-content {
    padding: 60px 0;
}
/* --- 分类 --- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}
.category-item {
    display: block;
    text-align: center;
    transition: transform 0.3s ease;
}
.category-item:hover {
    transform: translateY(-10px);
}
.category-item img {
    border-radius: 10px;
    margin-bottom: 10px;
}
.category-item span {
    display: block;
    font-weight: bold;
}
/* --- 产品 --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}
.product-card {
    background-color: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
}
.product-img {
    position: relative;
    overflow: hidden;
}
.product-img img {
    transition: transform 0.5s ease;
}
.product-card:hover .product-img img {
    transform: scale(1.1);
}
.product-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.product-card:hover .product-actions {
    opacity: 1;
}
.product-actions a {
    background-color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    box-shadow: var(--box-shadow);
    transition: background-color 0.3s ease;
}
.product-actions a:hover {
    background-color: var(--primary-color);
    color: var(--white);
}
.product-info {
    padding: 20px;
    text-align: center;
}
.product-info h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}
/* --- 特色服务 --- */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}
.feature-item {
    padding: 20px;
}
.feature-item i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}
/* --- 页脚 --- */
.main-footer {
    background-color: #222;
    color: #ccc;
    padding: 60px 0 20px;
}
.main-footer .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}
.footer-about p, .footer-links ul li, .footer-contact p {
    margin-bottom: 15px;
}
.footer-links a, .footer-contact a {
    color: #ccc;
    transition: color 0.3s ease;
}
.footer-links a:hover, .footer-contact a:hover {
    color: var(--primary-color);
}
.footer-social {
    text-align: center;
}
.footer-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #444;
    color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.footer-social a:hover {
    background-color: var(--primary-color);
    color: var(--white);
}
.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #444;
    font-size: 0.9rem;
}
/* --- 回到顶部 --- */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--primary-color);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
    }
    .main-nav ul {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .main-nav ul li {
        margin: 5px 15px;
    }
    .banner {
        height: 350px;
    }
    .banner-content h2 {
        font-size: 2.5rem;
    }
    .section-title {
        font-size: 2rem;
    }
}

第3步：JavaScript 交互 (js/main.js)

这是网站的“大脑”，负责处理动态效果，如轮播图和购物车。

用html做的零食网站织梦模板
（图片来源网络，侵删）
document.addEventListener('DOMContentLoaded', function () {
    // --- 轮播图功能 ---
    const slides = document.querySelectorAll('.slide');
    const prevBtn = document.querySelector('.prev');
    const nextBtn = document.querySelector('.next');
    const dotsContainer = document.querySelector('.dots');
    let currentSlide = 0;
    let slideInterval;
    // 创建指示点
    slides.forEach((_, index) => {
        const dot = document.createElement('button');
        dot.classList.add('dot');
        if (index === 0) dot.classList.add('active');
        dot.addEventListener('click', () => goToSlide(index));
        dotsContainer.appendChild(dot);
    });
    const dots = document.querySelectorAll('.dot');
    function goToSlide(n) {
        slides[currentSlide].classList.remove('active');
        dots[currentSlide].classList.remove('active');
        currentSlide = (n + slides.length) % slides.length;
        slides[currentSlide].classList.add('active');
        dots[currentSlide].classList.add('active');
    }
    function nextSlide() {
        goToSlide(currentSlide + 1);
    }
    function prevSlide() {
        goToSlide(currentSlide - 1);
    }
    function startSlideShow() {
        slideInterval = setInterval(nextSlide, 5000); // 每5秒切换一次
    }
    function stopSlideShow() {
        clearInterval(slideInterval);
    }
    prevBtn.addEventListener('click', () => {
        prevSlide();
        stopSlideShow();
        startSlideShow();
    });
    nextBtn.addEventListener('click', () => {
        nextSlide();
        stopSlideShow();
        startSlideShow();
    });
    startSlideShow();
    // --- 购物车功能 ---
    const cartCountElement = document.querySelector('.cart-count');
    let cartCount = 0;
    document.querySelectorAll('.add-to-cart-btn').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止链接默认跳转行为
            cartCount++;
            cartCountElement.textContent = cartCount;
            // 可以在这里添加一个“已添加”的提示
            const productCard = this.closest('.product-card');
            const originalIcon = this.innerHTML;
            this.innerHTML = '<i class="fas fa-check"></i>';
            this.style.backgroundColor = '#28a745';
            setTimeout(() => {
                this.innerHTML = originalIcon;
                this.style.backgroundColor = '';
            }, 1500);
        });
    });
    // --- 收藏功能 ---
    document.querySelectorAll('.add-to-wishlist-btn').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const icon = this.querySelector('i');
            if (icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
                this.style.color = 'red';
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
                this.style.color = '';
            }
        });
    });
    // --- 回到顶部按钮 ---
    const backToTopButton = document.querySelector('.back-to-top');
    window.addEventListener('scroll', () => {
        if (window.pageYOffset > 300) { // 当页面滚动超过300px时显示
            backToTopButton.classList.add('show');
        } else {
            backToTopButton.classList.remove('show');
        }
    });
    backToTopButton.addEventListener('click', (e) => {
        e.preventDefault();
        window.scrollTo({
            top: 0,
            behavior: 'smooth' // 平滑滚动
        });
    });
});

如何使用这个模板

  1. 创建文件和文件夹：按照上面的“文件结构”创建所有文件和文件夹。
  2. 准备图片：将您的 Logo、轮播图和产品图片放入 images 文件夹中，如果没有，可以使用 https://via.placeholder.com/ 这样的在线占位图服务。
  3. 复制代码：将上面提供的 HTML、CSS 和 JavaScript 代码分别复制到对应的文件中。
  4. ：打开 index.html，根据您的需求修改网站标题、导航链接、产品信息、页脚内容等。
  5. 预览网站：直接用浏览器打开 index.html 文件，您就可以看到一个功能完整的零食网站了。

如何“织梦” - 后续扩展建议

这个模板是静态的,但它为您搭建了一个非常棒的框架，如果您想让它更像一个真正的“织梦”网站，可以：

  • 分离头部和页脚：将 header 和 footer 部分分别拆分成 header.html 和 footer.html，然后使用服务器端语言（如 PHP 的 include 或 JavaScript 的 fetch）在 index.html 中引入它们，这样，当您需要修改导航或页脚时，只需修改一个文件即可。
  • 动态加载产品：将产品数据（图片、名称、价格）存储在一个 JSON 文件或数据库中，使用 JavaScript 的 fetch API 动态加载产品数据，并用 document.createElement 来创建产品卡片，这样，您无需修改 HTML 就可以更新产品列表。
  • 添加搜索和筛选：为产品列表添加搜索框和筛选器（如按价格、分类筛选），这需要更复杂的 JavaScript 逻辑，甚至需要后端支持。

希望这个详细的模板能帮助您快速搭建起一个漂亮的零食网站！

用html做的零食网站织梦模板
（图片来源网络，侵删）
-- 展开阅读全文 --
头像
dede安全确认码不显示，问题出在哪？
« 上一篇 2025-12-14
dede调用相关内容如何指定关键词？
下一篇 » 2025-12-14

相关文章

取消
微信二维码
支付宝二维码

目录[+]