天天看點
傳回

計算機畢業設計 基于HTML+CSS+JavaScript 大氣的甜品奶茶美食餐飲文化網頁設計與實作23頁面

👨‍🎓靜态網站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計👩‍🎓,常用的網頁設計軟體有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當然不同軟體寫出的前端Html5代碼都是一緻的，本網頁适合修改成為各種類型的産品展示網頁，比如美食、旅遊、攝影、電影、音樂等等多種主題，希望對大家有所幫助。

文章目錄📂

  • ​​一、網站題目👨‍🎓​​
  • ​​二、網站描述✍️​​
  • ​​三、網站介紹📚​​
  • ​​四、網站效果🌐​​
  • ​​五、代碼實作 🪓​​
  • ​​HTML結構代碼🧱​​
  • ​​CSS樣式代碼💒​​
  • ​​八、更多幹貨🎁​​

一、網站題目👨‍🎓

🥧 美食網頁介紹、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐飲文化、等網站的設計與制作。

二、網站描述✍️

🍧美食主題網站 主要對各種美食進行展示，讓浏覽者清晰地了解到各種美食的詳細資訊，便于浏覽者進行選擇。該子產品的左側有個美食分類，使用者可以選擇自己喜歡的種類，當點選種類後，就會在右側出現該分類下的各種美食，使用者可以點選自己感興趣的食品，進而看到它的具體資訊。它的具體資訊包括配料、産地及它的一些功能，使使用者對該食品有着全面的認識。

三、網站介紹📚

📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。

📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。

📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。

📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；

📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：​

​Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++​

​​ 等任意html編輯軟體進行運作及修改編輯等操作）。

其中：

（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；

（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；

（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。

四、網站效果🌐

計算機畢業設計 基于HTML+CSS+JavaScript 大氣的甜品奶茶美食餐飲文化網頁設計與實作23頁面

五、代碼實作 🪓

HTML結構代碼🧱 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>歐麥喜官網</title>    
  
  <link href="css/rest.css" rel="stylesheet" type="text/css" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <link href="css/animate.min.css" rel="stylesheet" type="text/css">
  <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
  <link href="css/video-js.css" rel="stylesheet" type="text/css">

</head>
<body>
  
  <div class="main1 animated bounceInDown" data-wow-delay="4.4s">
    <div class="index_top">
      <div class="w1200">
        <div class="nav  animated bounceInRight " style="animation-delay:1s;-webkit-animation-delay:1s;">
          <div class="nav_logo fl"><img src="images/logo.png"></div>
          <div class="nav_ul fr">
            <ul>
                <li>
                  <a href="#">企業•實力 </a>
                  <dl>
                            <dd><a href="#">企業•實力1</a></dd>
                              <dd><a href="#">企業•實力2</a></dd>
                              <dd><a href="#">企業•實力3</a></dd>
                          </dl>
                          </li>
                  <li>
                    <a href="#">極簡•形象</a>
                    <dl>
                            <dd><a href="#">極簡•形象1</a></dd>
                              <dd><a href="#">極簡•形象2</a></dd>
                              <dd><a href="#">極簡•形象3</a></dd>
                          </dl>
                  </li>
                  <li>
                    <a href="#">喜作•産品</a>
                    <dl>
                            <dd><a href="#">喜作•産品1</a></dd>
                              <dd><a href="#">喜作•産品2</a></dd>
                              <dd><a href="#">喜作•産品3</a></dd>
                          </dl>
                  </li>
                  <li class="cur"><a href="#">歐麥喜</a></li>
                  <li>
                    <a href="#">合作•驚喜</a>
                    <dl>
                            <dd><a href="#">合作•驚喜1</a></dd>
                              <dd><a href="#">合作•驚喜2</a></dd>
                              <dd><a href="#">合作•驚喜3</a></dd>
                          </dl>
                  </li>
                  <li>
                    <a href="#">火爆•動态</a>
                    <dl>
                            <dd><a href="#">火爆•動态1</a></dd>
                              <dd><a href="#">火爆•動态2</a></dd>
                              <dd><a href="#">火爆•動态3</a></dd>
                          </dl>
                  </li>
                  <li>
                    <a href="#">聯系•我們</a>
                    <dl>
                            <dd><a href="#">聯系•我們1</a></dd>
                              <dd><a href="#">聯系•我們2</a></dd>
                              <dd><a href="#">聯系•我們3</a></dd>
                          </dl>
                  </li>
              </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="ibanner" class="ibanner">
      <div class="bd">
        <ul>
          <li><img src="temp/banner1.jpg" /></li><li><img src="temp/banner2.jpg" /></li><li><img src="temp/banner3.jpg" /></li> <li><img src="temp/banner4.jpg" /></li>     </ul>
      </div>
    </div>
    
  </div>
  <div class="main5 wow fadeInUpRight">
    <div class="w1200">
      <div class="maincom main5-0 wow bounceInLeft" data-wow-delay="0.5s"></div>
      <div class="maincom main5-1 wow bounceInLeft" data-wow-delay="1s"></div>
      <div class="maincom main5-2 wow bounceInLeft" data-wow-delay="1.5s"></div>
    </div>
  </div>
  <!-- <div class="main2 wow fadeInUpLeft">
    <div class="w1200">
      <div class="maincom main2-0 wow bounceInLeft" data-wow-delay="0.3s"></div>
      <div class="maincom main2-1 wow bounceIn" data-wow-delay="0.6s"></div>
      <div class="maincom main2-2 wow bounceIn" data-wow-delay="0.9s"></div>
      <div class="maincom main2-3 wow bounceIn" data-wow-delay="1.2s"></div>
    </div>
  </div> -->
  <div class="main3 wow fadeInUpRight">
    <div class="w1200">
      <div class="maincom main3-0 wow bounceInLeft" data-wow-delay="0.5s"></div>
      <div class="maincom main3-1 wow bounceInRight" data-wow-delay="1s"></div>
    </div>
  </div>
  <div class="main4 wow fadeInUpLeft">
    <div class="w1200">
      <div class="maincom main4-0 wow bounce" data-wow-delay="0.5s"></div>
      <div class="maincom main4-1 wow bounce" data-wow-delay="1s">
        
                    <div>
                        <a class="news_ul_pic fl" href="#" target="_blank"><img src="temp/new1.jpg"></a>
                        <div class="indexnews fr">
                            <div class="indexnews_c1">
                                <a class="fl" href="#">企業簡介</a>
                            </div>
                            <p class="indexnews_c2">品納餐飲管理有限公司是一家集企業咨詢、餐飲連鎖經營、網絡科技創新為一體的綜合型企業，總部位于廣州市白雲區，經過多年的沉澱和悉心鑽研，公司已在集團化、多元化的新型企業道路上邁出了堅實的一步，成為集研發、制造、銷售、運輸、教育訓練為一體的專業餐飲管理服務機構，打造了以500公裡為業務半徑、整個大陸業務拓展和終端營運服務的無縫覆寫體系，目前在南京、上海、武漢、成都均已設有分公司。</p>
                            <a class="indexnews_a" href="#">更多詳情</a>
                        </div>
                        <div class="clear"></div>
                    </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="main2 wow fadeInUpLeft">
    <div class="w1200">
      <div class="maincom main2-0 wow bounceInLeft" data-wow-delay="0.3s">
        <video id="my-video" class="video-js" controls preload="auto" width="730" height="410"
          poster="temp/video.png" data-setup="{}">
            <source src="http://jq22com.qiniudn.com/jq22-sp.mp4" type="video/mp4">
            <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
          </video>
          <script src="js/video.min.js"></script> 
          <script src="js/zh-CN.js"></script>
          <script type="text/javascript">
          var myPlayer = videojs('my-video');
          videojs("my-video").ready(function(){
            var myPlayer = this;
            myPlayer.play();
          });
            
        </script> 
      </div>
      <div class="maincom main2-1 wow bounceIn indexpro" data-wow-delay="0.6s">
        <a href="">
          <img src="temp/index_pro1.jpg" alt="">
          <p class="p1">歐麥喜榮獲“受歡迎茶飲”，廣受全國……</p>
          <p class="p2">手作大麥茶熱銷全國，輕創企業的創新标杆，作為全國受歡迎的茶飲，歐麥喜閱聽人遍及大江南北，全國掀起麥茶新潮流……</p>
        </a>
      </div>
      <div class="maincom main2-2 wow bounceIn indexpro" data-wow-delay="0.9s">
        <a href="">
          <img src="temp/index_pro1.jpg" alt="">
          <p class="p1">歐麥喜調茶師的專業炫酷工藝圈粉數千……</p>
          <p class="p2">調茶工藝的美學根據調酒師演變，從最初的隻是簡單控流、控量到現在的将調試過程完成藝術僅僅幾個月時間，每一杯給一個步驟每一個工序都為優質典雅代言……</p>
        </a>
      </div>
    </div>
    <div class="clear"></div>
  </div>
  
  <div class="footer">
    <ul>
      <li>
        <p><span>姓   名</span><input type="text" name="name" id="name" class="liuyan"></p>
        <p><span>手機号</span><input type="text" name="tel" id="tel" class="liuyan"></p>
        <p><span>留   言</span><textarea name="introduce" id="contact" class="liuyan"></textarea></p>
        <p>
          <button class="fbtn1" name="button" onclick="FromSubmit()">送出</button>
          <button class="fbtn2" name="submit" onclick="ClickReset()">重置</button>
        </p>
      </li>
      <li>
        <img src="images/fewm.png">
      </li>
      <li>
        <img src="images/fh1.png"> 
      <p>
        <span>華南</span>廣州市天河區科學大道科彙金谷一街1号1-4樓
      </p>
      <p>
        <span>華北</span>北京市豐台區新宮中福麗宮品牌基地2号樓365室
      </p>
      <p>
        <span>華東</span>上海市闵行區顧戴路3009号祥鹿大廈2樓
      </p>        <em><img src="images/ftel.png">4006-150-513</em>
      </li>
    </ul>
    <div class="clear"></div> 
  </div>
  <div class="flink">
    <p>版權所有:品納餐飲管理有限公司<a href="http://www.miitbeian.gov.cn/" target="_blank">粵ICP備00008888号-88</a><a href="#" target="_blank">網站地圖</a></p>
    <p><span>友情連結：</span>
       <a target="_blank" href="#">飲品合作</a> <a target="_blank" href="#">火鍋合作</a> <a target="_blank" href="http://www.yibingke.com/">冰淇淋加盟</a> <a target="_blank" href="http://www.yzgcha.com/">貢茶加盟</a> <a target="_blank" href="http://www.jiugongz.com/">烘焙合作</a>    </p>
       <div class="clear"></div>
  </div>


  <div class="fixicon">
    <a href="" ><img src="images/fixicon1.png" alt=""></a>
    <a href="" ><img src="images/fixicon2.png" alt=""></a>
    <a href="" ><img src="images/fixicon3.png" alt=""></a>
    <a href="" ><img src="images/fixicon4.png" alt=""></a>
    <a href="" ><img src="images/fixicon5.png" alt=""></a>
  </div>
  <script src="js/wow.js"></script>
  <script src="js/jquery.SuperSlide.2.1.2.js"></script>

  <script>
  if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    new WOW().init();
  };
  $(function (){
    jQuery(".ibanner").slide({mainCell:".bd ul",autoPlay:true,delayTime:1000,effect:"leftLoop"});

  });
  </script>

  

</body>
</html>

CSS樣式代碼💒 

@media (min-width:0px) and (max-width:1200px) ,(min-height: 0px) and (max-height: 800px)  {
.fixicon{width: 60px;height: 400px;position: fixed;right: 0px;bottom: 10px;}
.fixicon a{float: left;margin-bottom: 10px;}
.fixicon a img{width: 60px;}

}
@media (min-width:1200px) and (min-height: 800px) {
.fixicon{width: 110px;height: 600px;position: fixed;right: 10px;bottom: 10px;}
.fixicon a{float: left;margin-bottom: 10px;}


}


.nav{height: 200px;width:100%;z-index:8;transition:all 0.2s;}
.nav_black li a{color: #2c2d30;}
.nav_logo{margin: 53px 0 25px 0;}
.nav_ul{margin: 77px 0 0 0;}
.nav_ul ul li{float:left;height:70px;line-height:70px;position:relative;transition:all 0.2s;margin-left: 30px;}
.nav_ul a{font-size: 21px;color: #ffffff;/* margin-left:30px; */transition:all 0.2s;padding: 5px 10px;}
.nav_ul ul li.cur a{border: 1px solid #71b057;color: #71b057;}
.nav_ul ul li:hover a{border: 1px solid #71b057;color: #71b057;}
.nav_ul ul li:hover dl{display:block;}
.nav_ul dl{position:absolute;top:70px;border-top:0px;display:none;}
.nav_ul dl dd{height:40px;line-height:40px;width:148px;margin-bottom: 10px;}
.nav_ul dl dd a{display:block;width:100%;height:40px;line-height:40px;margin:0px;padding:0px;overflow:hidden;text-indent:18px;background:url(../images/nav_bg1.png) 148px center no-repeat;transition:all 0.5s;}
.nav_ul dl dd a:hover{background:#f6f6f6 url(../images/nav_bg1.png) 130px center no-repeat;text-indent: 10px;}



.main1{width: 100%;overflow:hidden;position: relative;}
.main2{background: #000 url(../images/bg2.jpg) no-repeat top center;width: 100%;height:1080px;overflow:hidden;}
.main3{background:url(../images/bg3.jpg) no-repeat center center;width: 100%; height:1140px; overflow:hidden;}
.main4{background:url(../images/bg4.jpg) no-repeat center center;width: 100%; height:1080px; overflow:hidden;}
.main5{background:url(../images/bg5.jpg) no-repeat center center;width: 100%; height:972px; overflow:hidden;}

.maincom{position: absolute;left: 50%; top:50%;}

八、更多幹貨🎁

1.如果我的部落格對你有幫助、如果你喜歡我的部落格内容，​

​請 “👍點贊” “✍️評論” “💙收藏” ​

​一鍵三連哦！

2.​

​💗【👇🏻👇🏻👇🏻關注我| 擷取更多源碼 | 優質文章】 ​

​帶您學習各種前端插件、3D炫酷效果、圖檔展示、文字效果、以及整站模闆 、大學生畢業HTML模闆 、期末大作業模闆 、等! 「在這裡有好多 前端 開發者，一起探讨 前端 Node 知識，互相學習」！

dreamweaver web前端大作業 網頁設計與制作 web ide
上一篇: BOM location-history-navigator對象
下一篇: BOM_Navigator_History_Location

繼續閱讀