「四川美食网页」
链接：https://pan.quark.cn/s/d8a893548ece链接：https://pan.quark.cn/s/d8a893548ece
链接：https://pan.quark.cn/s/d8a893548ece
不是宣传
不是宣传
不是宣传
只是作业！只是作业！只是作业！只是作业！只是作业！只是作业！
之前代做的大作业（doge），全部放出来，放着也是吃灰~
纯搬砖，技术力很差，天天耕地，在代码的田野里，干就完了！
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top shadow-sm"> <div class="container"> <a class="navbar-brand" href="#"> <!-- <img src="https://via.placeholder.com/40x40/FFD700/000000?text=LOGO" alt="网站Logo" class="d-inline-block align-top me-2"> --> 🌶️ 巴适川味 </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="index.html">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="history.html">川菜历史</a> </li> <li class="nav-item"> <a class="nav-link" href="dishes.html">经典佳肴</a> </li> <li class="nav-item"> <a class="nav-link" href="map.html">美食地图</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">关于我们</a> </li> </ul> </div> </div> </nav> </header> <section id="hero" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/111.png" class="d-block w-100 hero-img" alt="川菜图片 1"> <div class="carousel-caption d-none d-md-block"> <h1 data-aos="fade-up" data-aos-duration="1000">麻辣鲜香，品味四川</h1> <p data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200">探索中国四大菜系之首的独特魅力</p> <a href="#features" class="btn btn-danger btn-lg mt-3" data-aos="fade-up" data-aos-duration="1400" data-aos-delay="400">了解更多</a> </div> </div> <div class="carousel-item"> <img src="images/222.webp" class="d-block w-100 hero-img" alt="川菜图片 2"> <div class="carousel-caption d-none d-md-block"> <h1 data-aos="fade-up" data-aos-duration="1000">一菜一格，百菜百味</h1> <p data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200">不仅仅是辣，更是味蕾的极致体验</p> <a href="#dishes" class="btn btn-danger btn-lg mt-3" data-aos="fade-up" data-aos-duration="1400" data-aos-delay="400">探索经典菜肴</a> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#hero" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#hero" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </section> <main> <section id="features" class="py-5 bg-light"> <div class="container" data-aos="fade-up"> <h2 class="text-center mb-5">川菜特色</h2> <div class="row text-center"> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="feature-icon mb-3">🌶️</div> <h3>多样化的“辣”</h3> <p>麻辣、干辣、糊辣... 川菜的辣并非单一，而是层次丰富，变化万千。</p> </div> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="feature-icon mb-3">🍲</div> <h3>深厚的文化底蕴</h3> <p>川菜不仅是食物，更是四川人民热情好客、乐观豁达的精神体现。</p> </div> <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="feature-icon mb-3">🥢</div> <h3>精妙的烹饪技法</h3> <p>炒、炸、烧、蒸、炖、卤... 多达38种烹饪手法，成就百变川味。</p> </div> </div> </div> </section> <section id="dishes" class="py-5"> <div class="container"> <h2 class="text-center mb-5" data-aos="fade-up">经典佳肴</h2> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4"> <div class="col" data-aos="fade-up" data-aos-delay="100"> <div class="card h-100 shadow-sm"> <div class="img-container"> <img src="images/222.webp" class="card-img-top" alt="麻婆豆腐"> </div> <div class="card-body"> <h5 class="card-title">麻婆豆腐</h5> <p class="card-text">麻、辣、烫、香、酥、嫩、鲜、活八大特色，堪称川菜经典。</p> </div> </div> </div> <div class="col" data-aos="fade-up" data-aos-delay="200"> <div class="card h-100 shadow-sm"> <div class="img-container"> <img src="images/3333.webp" class="card-img-top" alt="宫保鸡丁"> </div> <div class="card-body"> <h5 class="card-title">宫保鸡丁</h5> <p class="card-text">酸甜微辣，鸡肉滑嫩，花生米香脆，中外闻名的下饭菜。</p> </div> </div> </div> <div class="col" data-aos="fade-up" data-aos-delay="300"> <div class="card h-100 shadow-sm"> <div class="img-container"> <img src="images/444.webp" class="card-img-top" alt="水煮鱼"> </div> <div class="card-body"> <h5 class="card-title">水煮鱼</h5> <p class="card-text">鱼肉鲜嫩，汤汁红亮，麻辣鲜香，冬季暖身必备。</p> </div> </div> </div> <div class="col" data-aos="fade-up" data-aos-delay="400"> <div class="card h-100 shadow-sm"> <div class="img-container"> <img src="images/5555.webp" class="card-img-top" alt="回锅肉"> </div> <div class="card-body"> <h5 class="card-title">回锅肉</h5> <p class="card-text">肥而不腻，香气四溢，是川菜家常菜的代表。</p> </div> </div> </div> </div> </div> </section> <section class="py-5 bg-danger text-white text-center"> <div class="container" data-aos="zoom-in"> <h2 style="color: rgb(246, 153, 31);">想了解更多川菜故事？</h2> <p class="lead mb-4">探索川菜的历史、文化和更多令人垂涎的美食！</p> <a href="#" class="btn btn-light btn-lg">进入川菜历史页面</a> </div> </section> </main> <footer class="bg-dark text-white py-4"> <div class="container text-center"> <p>© 2023 巴适川味. 保留所有权利.</p> <p>网站设计用于学习演示</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script src="js/script.js"></script> </body> </html>
扫一扫
1728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
