这是为您创作的“烤鱼网站模板”的完整代码包。它包含一个静态HTML页面、独立的CSS样式表和JavaScript交互文件，可直接运行，用于展示烤鱼店的品牌形象、菜单和在线预订功能。 **文件结构** - `index.html` - `css/style.css` - `js/script.js` ```html 焱火烤鱼 · 炭火匠心
本模板由 顾老师AI 生成 | 内容仅供演示使用 烤鱼网站模板
🔥 炭火直烤 · 活鱼现杀

一口入魂的
川渝烤鱼

二十余种秘制香料，慢火烤制，外酥里嫩。麻辣鲜香，每一口都是炭火与时间的艺术。

立即点餐 预约座位
12+ 年烤鱼经验
8 家直营门店
98% 顾客满意度
焱火烤鱼
招牌麻辣烤鱼
鲜青椒味
我们的故事

一条烤鱼的匠心之旅

厨房炭火
12年专注

从山城巷子到全国餐桌

2012年，创始人老陈在重庆解放碑旁的小巷里支起第一个炭火烤架。凭借世代相传的腌料配方和对活鱼品质的偏执，焱火烤鱼迅速成为本地人的深夜食堂。

我们坚持只用当日活鱼，搭配四川汉源花椒、云南小米辣等二十余种原产地香料，经9道工序，炭火慢烤25分钟。鱼皮焦香酥脆，鱼肉嫩滑入味。

活鱼现杀
果木炭烤
秘制香料
零添加
真实评价

食客说

免排队

预约订座

门店地址

重庆市渝中区解放碑步行街88号 焱火烤鱼总店

营业时间

11:00 - 23:00 (最后点单 22:00)

电话

023-6388 8888

``` ```css /* ===== css/style.css ===== */ /* 全局重置 & 字体 */ :root { --primary: #d94f14; --primary-dark: #b33e0f; --primary-light: #f86f2e; --accent: #f5b342; --dark: #1a1a1a; --text: #2d2d2d; --text-light: #6b6b6b; --bg-warm: #fdf7f2; --bg-card: #ffffff; --shadow: 0 12px 30px rgba(0,0,0,0.08); --shadow-hover: 0 20px 40px rgba(0,0,0,0.15); --radius: 24px; --radius-sm: 12px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-warm); color: var(--text); line-height: 1.6; overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; display: block; border-radius: var(--radius-sm); } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .section-padding { padding: 100px 0; } .section-header { text-align: center; margin-bottom: 60px; } .section-subtitle { display: inline-block; background: rgba(217, 79, 20, 0.08); color: var(--primary); padding: 6px 20px; border-radius: 30px; font-size: 0.9rem; font-weight: 600; letter-spacing: 1px; margin-bottom: 16px; } .section-header h2 { font-size: 2.6rem; font-weight: 900; margin-bottom: 16px; color: var(--dark); } .divider { width: 60px; height: 4px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 4px; margin: 0 auto; } /* 按钮 */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border-radius: 60px; font-weight: 600; font-size: 1rem; border: none; cursor: pointer; transition: var(--transition); letter-spacing: 0.3px; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; box-shadow: 0 8px 20px rgba(217, 79, 20, 0.3); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(217, 79, 20, 0.4); } .btn-outline { background: transparent; color: var(--dark); border: 2px solid var(--dark); } .btn-outline:hover { background: var(--dark); color: white; transform: translateY(-3px); } .btn-block { width: 100%; justify-content: center; } /* ===== 导航 ===== */ .navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 16px 0; transition: var(--transition); } .navbar.scrolled { background: rgba(253, 247, 242, 0.92); backdrop-filter: blur(16px); box-shadow: 0 4px 20px rgba(0,0,0,0.06); padding: 10px 0; } .nav-container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.6rem; font-weight: 900; color: var(--primary); display: flex; align-items: center; gap: 8px; } .logo i { font-size: 1.8rem; color: var(--primary-dark); } .nav-list { display: flex; gap: 32px; } .nav-link { font-weight: 500; color: var(--text); position: relative; padding-bottom: 4px; transition: var(--transition); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary); transition: var(--transition); border-radius: 4px; } .nav-link:hover, .nav-link.active { color: var(--primary); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .bar { width: 28px; height: 3px; background: var(--dark); border-radius: 6px; transition: var(--transition); } /* ===== Hero ===== */ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; background: linear-gradient(145deg, #fdf0e8 0%, #f8e0d0 100%); overflow: hidden; } .hero-overlay { position: absolute; inset: 0; background: url('data:image/svg+xml;utf8,'); background-size: 180px; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 2; padding-top: 80px; } .hero-badge { background: rgba(217, 79, 20, 0.12); color: var(--primary-dark); display: inline-block; padding: 8px 20px; border-radius: 40px; font-weight: 600; font-size: 0.9rem; margin-bottom: 20px; letter-spacing: 1px; } .hero-text h1 { font-size: 3.8rem; font-weight: 900; line-height: 1.2; color: var(--dark); margin-bottom: 20px; } .hero-highlight { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-text p { font-size: 1.1rem; color: var(--text-light); max-width: 480px; margin-bottom: 36px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; } .hero-stats { display: flex; gap: 36px; } .stat-item { display: flex; flex-direction: column; } .stat-number { font-size: 2rem; font-weight: 900; color: var(--primary-dark); } .stat-label { font-size: 0.85rem; color: var(--text-light); } .hero-visual { position: relative; display: flex; justify-content: center; } .hero-image-wrapper { position: relative; width: 100%; max-width: 500px; } .hero-img { border-radius: var(--radius); box-shadow: 0 30px 50px rgba(0,0,0,0.15); width: 100%; height: auto; object-fit: cover; transform: rotate(2deg); transition: var(--transition); } .hero-img:hover { transform: rotate(0deg) scale(1.02); } .floating-card { position: absolute; background: white; padding: 12px 20px; border-radius: 50px; box-shadow: 0 12px 28px rgba(0,0,0,0.1); font-weight: 600; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--dark); animation: float 4s ease-in-out infinite; } .floating-card i { color: var(--accent); } .card-1 { top: 10%; left: -10%; animation-delay: 0s; } .card-2 { bottom: 15%; right: -10%; animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ===== About ===== */ .about { background: white; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-image { position: relative; } .about-image img { border-radius: var(--radius); box-shadow: var(--shadow); } .about-exp-badge { position: absolute; bottom: -20px; right: -20px; background: var(--primary); color: white; padding: 18px 24px; border-radius: 60px; font-weight: 700; font-size: 1.2rem; box-shadow: 0 10px 25px rgba(217,79,20,0.3); } .about-content h3 { font-size: 1.8rem; margin-bottom: 20px; } .about-content p { color: var(--text-light); margin-bottom: 16px; line-height: 1.8; } .about-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; } .feature { display: flex; align-items: center; gap: 12px; background: var(--bg-warm); padding: 12px 18px; border-radius: 40px; font-weight: 600; font-size: 0.95rem; } .feature i { color: var(--primary); font-size: 1.2rem; } /* ===== Menu ===== */ .menu { background: var(--bg-warm); } .menu-filter { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; } .filter-btn { background: transparent; border: 2px solid #ddd; padding: 10px 28px; border-radius: 60px; font-weight: 600; cursor: pointer; transition: var(--transition); color: var(--text-light); font-size: 0.95rem; } .filter-btn.active, .filter-btn:hover { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 6px 18px rgba(217,79,20,0.25); } .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 28px; } .menu-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); cursor: default; } .menu-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); } .menu-card img { width: 100%; height: 200px; object-fit: cover; } .menu-card-body { padding: 20px 22px 24px; } .menu-card-body h3 { font-size: 1.3rem; margin-bottom: 6px; } .menu-card-body .price { font-size: 1.5rem; font-weight: 900; color: var(--primary); margin-bottom: 10px; } .menu-card-body .desc { color: var(--text-light); font-size: 0.9rem; margin-bottom: 16px; line-height: 1.6; } .menu-tag { display: inline-block; background: rgba(245, 179, 66, 0.15); color: #8a6d2b; padding: 4px 14px; border-radius: 40px; font-size: 0.75rem; font-weight: 600; margin-right: 6px; } /* ===== Reviews ===== */ .reviews { background: white; } .review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; } .review-card { background: var(--bg-warm); padding: 28px 24px; border-radius: var(--radius); box-shadow: var(--shadow); transition: var(--transition); } .review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } .review-stars { color: var(--accent); margin-bottom: 12px; font-size: 1.1rem; } .review-card p { color: var(--text); font-style: italic; line-height: 1.8; margin-bottom: 16px; } .reviewer { display: flex; align-items: center; gap: 12px; } .reviewer i { font-size: 2.2rem; color: var(--primary-light); opacity: 0.5; } .reviewer span { font-weight: 600; } /* ===== Reservation ===== */ .reservation { background: var(--bg-warm); } .reservation-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; } .reservation-info { display: flex; flex-direction: column; gap: 20px; } .info-card { background: white; padding: 24px; border-radius: var(--radius-sm); box-shadow: var(--shadow); transition: var(--transition); } .info-card i { font-size: 1.8rem; color: var(--primary); margin-bottom: 12px; } .info-card h4 { font-size: 1.1rem; margin-bottom: 6px; } .info-card p { color: var(--text-light); } .reservation-form { background: white; padding: 40px; border-radius: var(--radius); box-shadow: var(--shadow); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px 16px; border: 2px solid #e5e5e5; border-radius: var(--radius-sm); font-size: 1rem; background: #fafafa; transition: var(--transition); font-family: inherit; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); outline: none; background: white; box-shadow: 0 0 0 4px rgba(217,79,20,0.08); } .form-feedback { margin-top: 16px; padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 500; display: none; } .form-feedback.success { background: #d4edda; color: #155724; display: block; } .form-feedback.error { background: #f8d7da; color: #721c24; display: block; } /* ===== Footer ===== */ .footer { background: var(--dark); color: #ccc; padding-top: 60px; } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 48px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid #333; } .footer-brand .logo { color: white; margin-bottom: 12px; } .footer-brand p { margin-bottom: 16px; color: #aaa; } .social-links { display: flex; gap: 16px; } .social-links a { width: 44px; height: 44px; background: #2a2a2a; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ccc; transition: var(--transition); font-size: 1.2rem; } .social-links a:hover { background: var(--primary); color: white; } .footer-links h5, .footer-contact h5 { color: white; font-size: 1.1rem; margin-bottom: 16px; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: #aaa; transition: var(--transition); } .footer-links a:hover { color: var(--accent); } .footer-contact p { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .footer-bottom { text-align: center; padding: 24px 0; color: #666; font-size: 0.9rem; } /* ===== 响应式 ===== */ @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-text p { margin: 0 auto 36px; } .hero-actions { justify-content: center; } .hero-stats { justify-content: center; } .hero-visual { max-width: 500px; margin: 0 auto; } .card-1 { left: 0; } .card-2 { right: 0; } .about-grid { grid-template-columns: 1fr; } .reservation-wrapper { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-list { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: white; flex-direction: column; padding: 80px 32px 40px; box-shadow: -10px 0 30px rgba(0,0,0,0.1); transition: var(--transition); gap: 24px; } .nav-list.active { right: 0; } .hamburger { display: flex; } .hamburger.active .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active .bar:nth-child(2) { opacity: 0; } .hamburger.active .bar:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } .hero-text h1 { font-size: 2.6rem; } .hero-stats { flex-wrap: wrap; gap: 24px; } .section-header h2 { font-size: 2rem; } .form-row { grid-template-columns: 1fr; } .reservation-form { padding: 24px; } .footer-content { grid-template-columns: 1fr; gap: 32px; } .about-exp-badge { font-size: 1rem; padding: 12px 18px; bottom: -15px; right: -10px; } } @media (max-width: 480px) { .container { padding: 0 16px; } .hero-text h1 { font-size: 2rem; } .hero-actions { flex-direction: column; align-items: center; } .btn { width: 100%; justify-content: center; } .menu-grid { grid-template-columns: 1fr; } .review-grid { grid-template-columns: 1fr; } } ``` ```javascript // ===== js/script.js ===== document.addEventListener('DOMContentLoaded', () => { // ---------- 导航滚动效果 ---------- const navbar = document.getElementById('navbar'); const navLinks = document.querySelectorAll('.nav-link'); const hamburger = document.getElementById('hamburger'); const navMenu = document.getElementById('navMenu'); window.addEventListener('scroll', () => { if (window.scrollY > 80) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } // 活跃导航高亮 const sections = document.querySelectorAll('section[id]'); let current = ''; sections.forEach(section => { const top = section.offsetTop - 150; if (window.scrollY >= top) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === '#' + current) { link.classList.add('active'); } }); }); // 移动端汉堡菜单 hamburger.addEventListener('click', () => { hamburger.classList.toggle('active'); navMenu.classList.toggle('active'); }); // 点击链接关闭菜单 navLinks.forEach(link => { link.addEventListener('click', () => { hamburger.classList.remove('active'); navMenu.classList.remove('active'); }); }); // ---------- 菜单数据 ---------- const menuItems = [ { id: 1, name: '经典麻辣烤鱼', price: '¥168', desc: '四川汉源花椒+朝天椒，炭火慢烤25分钟，麻辣鲜香', img: 'https://images.unsplash.com/photo-1583045652974-6e8b5c0c0e8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', category: 'classic', tags: ['人气TOP1', '重辣'] }, { id: 2, name: '鲜青椒烤鱼', price: '¥158', desc: '新鲜青花椒+藤椒油，清麻鲜爽，回味微甜', img: 'https://images.unsplash.com/photo-1574482620811-1b1f9b3c8b3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', category: 'special', tags: ['清爽', '微麻'] }, { id: 3, name: '蒜香黄油烤鱼', price: '¥178', desc: '南洋风味，蒜蓉黄油酱汁，外皮酥脆，奶香浓郁', img: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', category: 'special', tags: ['创新口味'] }, { id: 4, name: '泡椒酸菜烤鱼', price: '¥158', desc: '老坛酸菜+野山椒，酸辣开胃，越吃越上瘾', img: 'https://images.unsplash.com/photo-1583045652974-6e8b5c0c0e8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', category: 'classic', tags: ['酸辣'] }, { id: 5, name: '香辣烤鱼翅', price: '¥48', desc: '鱼翅部位，胶质丰富，香辣入味，下酒必点', img: 'https://images.unsplash.com/photo-1574482620811-1b1f9b3c8b3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', category: 'sides', tags: ['小食'] }, { id: 6, name: '冰镇酸梅汤', price: '¥12', desc: '古法熬制，乌梅山楂桂花，解辣神器', img: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', category: 'sides', tags: ['饮品', '解辣'] }, { id: 7, name: '红糖糍粑', price: '¥22', desc: '手工糍粑，外酥里糯，淋上红糖浆，甜而不腻', img: 'https://images.unsplash.com/photo-1583045652974-6e8b5c0c0e8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', category: 'sides', tags: ['甜品'] }, { id: 8, name: '双椒沸腾鱼', price: '¥188', desc: '限量版，双色辣椒铺满，上桌淋热油，仪式感满满', img: 'https://images.unsplash.com/photo-1574482620811-1b1f9b3c8b3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', category: 'classic', tags: ['限量', '重辣'] }, ]; const menuGrid = document.getElementById('menuGrid'); const filterBtns = document.querySelectorAll('.filter-btn'); function renderMenu(category = 'all') { const filtered = category === 'all' ? menuItems : menuItems.filter(item => item.category === category); menuGrid.innerHTML = filtered.map(item => `
${item.name}

${item.name}

${item.price}

${item.desc}

${item.tags.map(tag => `${tag}`).join('')}
`).join(''); } renderMenu('all'); filterBtns.forEach(btn => { btn.addEventListener('click', () => { filterBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); const filter = btn.dataset.filter; renderMenu(filter); }); }); // ---------- 评价数据 ---------- const reviews = [ { stars: 5, text: '重庆最好吃的烤鱼！麻辣味超正，鱼皮焦脆，鱼肉嫩得像豆腐。每次去都要排队，但值得等！', name: '吃货小辣椒', icon: 'fas fa-user-circle' }, { stars: 5, text: '带外地朋友来吃，被夸了一晚上。青椒味很特别，清爽不腻，连不吃辣的朋友都吃了两碗饭。', name: '山城美食家', icon: 'fas fa-user-circle' }, { stars: 4, text: '环境很有烟火气，服务也很热情。推荐蒜香黄油烤鱼，创新口味意外的好吃，孩子特别喜欢。', name: '一家三口', icon: 'fas fa-user-circle' }, { stars: 5, text: '作为烤鱼重度爱好者，焱火是我心中的白月光。酸梅汤配烤鱼绝了，夏天来一瓶冰镇酸梅汤，爽！', name: '鱼鱼爱好者', icon: 'fas fa-user-circle' }, ]; const reviewGrid = document.getElementById('reviewGrid'); reviewGrid.innerHTML = reviews.map(r => `
${'★'.repeat(r.stars)}${'☆'.repeat(5 - r.stars)}

"${r.text}"

${r.name}
`).join(''); // ---------- 预约表单 ---------- const form = document.getElementById('reservationForm'); const feedback = document.getElementById('formFeedback'); form.addEventListener('submit', (e) => { e.preventDefault(); const name = document.getElementById('name').value.trim(); const phone = document.getElementById('phone').value.trim(); const date = document.getElementById('date').value; const time = document.getElementById('time').value; if (!name || !phone || !date || !time) { feedback.className = 'form-feedback error'; feedback.textContent = '请填写完整信息（姓名、手机、日期、时间）'; feedback.style.display = 'block'; return; } if (!/^1\d{10}$/.test(phone)) { feedback.className = 'form-feedback error'; feedback.textContent = '请输入正确的11位手机号'; feedback.style.display = 'block'; return; } // 模拟提交成功 feedback.className = 'form-feedback success'; feedback.textContent = `✅ ${name} 您好！已为您预留 ${date} ${time} 的座位，我们不见不散！`; feedback.style.display = 'block'; form.reset(); // 3秒后隐藏 setTimeout(() => { feedback.style.display = 'none'; }, 5000); }); // 设置日期最小值为今天 const today = new Date().toISOString().split('T')[0]; document.getElementById('date').setAttribute('min', today); // 设置默认日期为明天 const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); document.getElementById('date').value = tomorrow.toISOString().split('T')[0]; }); ``` **