原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的美食菜谱网页设计制作，非常适合初学者学习使用。

网页实现截图：文末获取源码

网站首页：

菜谱：

美食达人：

手机版效果：



主要源码结构：

主要源码展示：

index.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5响应式美食网站模板</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/index.css"> <script src="./js/jquery-1.10.2.min.js"></script> <script src="./js/bootstrap.min.js"></script></head><body>  <div class="container"> <nav class="navbar navbar-expand-md bg-smare  navbar-dark mt-0"> <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar"> <span class="navbar-toggler-icon"></span> </button>  <a href="#" class="navbar-brand"> <img src="https://localhost:9000/preview/element/00/01/26/30/E-1263083-6FC2F3D2.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320" alt="" width="30" class="align-top" style="border-radius: 50%;"> 美食霸王餐 </a> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item"><a href="index.html" class="nav-link">首页</a></li> <li class="nav-item"><a href="menu.html" class="nav-link">菜谱</a></li> <li class="nav-item"><a href="foodie.html" class="nav-link">美食达人</a></li> </ul> <form action="#" class="form-inline"> <input type="search" class="form-control mr-sm-2" placeholder="Search"> <!--  --> </form> </div> </nav> </div>  <div class="data-content"> <div class="part-1"> <div class="left"> <div class="hot"> <h1 class="title">今日热搜</h1> <div class="hotlist"> <span class="active">可乐鸡翅</span> <span class="active">红烧排骨</span> <span class="active">糖醋排骨</span> <span>清蒸鲈鱼</span> <span>空气炸锅</span> <span>油焖大虾</span> <span>麻辣小龙虾</span> <span>蒜蓉小龙虾</span> </div> </div> <div class="sancan"> <h1 class="title"> 今日三餐 <ul class="sancan_tab"> <li class="current">早餐</li> <li>午餐</li> <li>下午茶</li> <li>晚餐</li> <li>夜宵</li> </ul> </h1> <div class="sancan_w">  <div class="sancan-swiper-slide"> <div class="sancan_item"> <div class="imgw" style="background:url(https://localhost:9000/r/98/64/10016098/s10016098_152224196314585.jpg" />点赞、收藏、关注、评论啦