大学生WEB前端HTML网页期末作业,静态html美食网站网页—重庆美食资讯网站模板

网站简介

网站主题

重庆美食网站,一共4个页面，分别包括首页、二级页面包括美食资讯和重庆美食2个页面，三级页面美食资讯详情1个页面

网站使用div+css布局页面，网站头部使用js制作banner动态图片切换，网站使用div,ul,li,a,p,h1,h2,h3,h4,form,input,button,table,tr,td等标签，css使用margin，border，padding，font-weight，font-family，color，width，line-height，overflow，float，text-align，background，display等样式

网站是最简单的页面布局，任何编辑器都可以打开网站代码进行编辑，包括Dreamweaver，vs code，HBuilds，sublime，记事本等软件都可以进行编辑

网站截图

网站代码

  <div class="main">
    <div class="banner">
      <div class=" ">
        <div id="bannerbox">
          <!-- 轮播图片 -->
          <div id="tab">
            <img class="tabImg" src="images/banner.jpg" style="display: inline;">
            <img class="tabImg" src="images/banner1.jpg" style="display: none;">
            <img class="tabImg" src="images/banner2.jpg" style="display: none;">


          </div>
          <!-- 指示符 -->
          <div class="lunbo_btn">
            <span num="0" class="tabBtn hover"></span>
            <span num="1" class="tabBtn"></span>
            <span num="2" class="tabBtn"></span>
          </div>
          <!-- 左右切换按钮 -->
          <div class="arrow prve">
            <span class="slider_left"></span>
          </div>
          <div class="arrow next">
            <span class="slider_right"></span>
          </div>
        </div>
      </div>


    </div>

    <div class="menu">
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="news.html">美食资讯</a></li>
        <li><a href="food.html">重庆美食</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div>

    <div class="foodbox">
      <div class="foodleft">
        <h2>重庆美食<br> </h2>
        <p>
          重庆是中国一个具有悠久历史和独特文化的城市，同时也是中国著名的美食城市之一。重庆美食以麻辣、鲜香、口味独特而闻名于世，其美食文化深受游客和食客喜爱。 </p>
        <p>
          重庆火锅是重庆最著名的美食之一，被誉为“一锅香火重庆味”。火锅底料用料多样，包括羊油、花生酱、豆瓣酱等多种调料，加上各种肉类、蔬菜和海鲜食材，味道丰富。重庆火锅的特色在于火锅底部还有一个锅底油，吃完后可以用面条或米饭烫油，形成一道独特的美食。
        </p>
        <p>
          重庆还有很多其他美食，比如麻辣兔头、麻辣鸡爪、黄桂鱼、酸菜鱼、干锅牛蛙等等。总之，重庆美食丰富多样，每一道都有其独特的风味，让人垂涎欲滴。重庆美食不仅仅是为了填饱肚子，更是一种文化的体验，让人感受到重庆人的热情和豪爽。
        </p>
      </div>

      <div class="foodright">
        <img src="./images/intro.png" width="100%" alt="">
      </div>

    </div>
    <div class="title">
      推荐美食
    </div>
    <div class="yjdetail">
      <ul>
        <li>
          <img src="images/a4.png">
          <p> <a href="#"> 小面</a></p>
          <p>
            小面是一种重庆特色面食，是用小麦粉制成的细面条。小面的汤底有很多种类，如牛肉面、鸡杂面、鱼丸面等等。小面汤浓郁鲜美，配料丰富，是重庆人早餐或下午茶的首选。
          </p>
        </li>
        <li>
          <img src="images/a5.png">
          <p> <a href="#">水煮鱼</a></p>
          <p>
            水煮鱼是一道以鱼为主料的川菜，重庆人尤其喜欢。它的制作方法是将切好的鱼片放入开水中煮熟，再加上豆芽、豆皮、木耳等食材和大量的辣椒、花椒等香料。水煮鱼口感鲜美，辣味十足。
          </p>
        </li>

        <li>
          <img src="images/a6.png">
          <p> <a href="#">酸辣粉</a></p>
          <p>
            酸辣粉是一道兼具甜、酸、辣味道的传统小吃。它的主要原料是红薯粉和豆芽，再加上辣椒油、花生碎、芝麻酱等调料。吃时先将调料均匀混合后再倒入碗中，加入开水即可食用。
          </p>
        </li>

        <li>
          <img src="images/a7.png">
          <p> <a href="#">烤鱼</a></p>
          <p>
            烤鱼是一道以鱼为主料的川菜，在重庆也非常受欢迎。它的制作方法是将整条鱼涂上各种调料后放入烤箱中烤制。烤出来的鱼外焦里嫩，口感极佳。
          </p>
        </li>

        <li>
          <img src="images/a8.png">
          <p> <a href="#">麻花</a></p>
          <p>
            麻花是一种传统的重庆小吃，形状像扭曲的绳子。它的制作方法是将小麦粉和糖混合后揉成面团，.76平方公里，由蒙山园区、钻石园区、岱崮园区、孟良崮园区和云蒙湖园区组成。
          </p>
        </li>

        <li>
          <img src="images/a9.png">
          <p> <a href="#">串串香</a></p>
          <p>
            一种以各种肉类和蔬菜为主料的重庆小吃，类似于火锅，但与火锅不同的是，食材已经被串好，直接放入锅中煮熟。串串香的汤底通常分为麻辣和清汤两种，再加上各种香料和调料，味道十分鲜美。在吃的过程中，可以根据个人口味选择不同的食材，每一口都能尝到不同的味道。
          </p>
        </li>

      </ul>
    </div>
  </div>
  <script src="./js/index.js"></script>