當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

基于HTML+CSS+JavaScript制作美食文化网站 ——卡通创意的烧烤(5个页面) html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

發布時間：2023/12/31 javascript 46 豆豆

生活随笔收集整理的這篇文章主要介紹了基于HTML+CSS+JavaScript制作美食文化网站 ——卡通创意的烧烤(5个页面) html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

👨?🎓靜態網站的編寫主要是用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結構代碼🧱

<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="description" content=""><meta name="author" content="BBQ"><title>烤天下酒吧燒烤加盟官網酒吧文化燒烤領導者 </title></head> <body>  <header id="header" class=""><div class="container"><div class="global-nav"><button class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="brand" href="index.html">烤天下</a><nav class="navbar"><ul class="nav"><li class="active"><a href="index.html" class="home-current">首頁</a></li><li class=""><a href="food.html">招牌美食</a></li><li class=""><a href="join.html">招商加盟</a></li><li class=""><a href="profile.html">企業概況</a></li><li class=""><a href="about.html">聯系我們</a></li></ul></nav></div></div> </header>  <section class="carousel-top"><div class="banner"><div class="b-img"><a href="#" style="background:url(img/banner/slider-1.jpg) center no-repeat; background-size:cover;"></a><a href="#" style="background:url(img/banner/slider-2.jpg) center no-repeat; background-size:cover;"></a></div><div class="b-list"></div><a class="bar-left" href="#"><em></em></a><a class="bar-right" href="#"><em></em></a></div> </section>  <section id="greenx" style="background:#c30d23"><div class="container"><div class="row"><div class="item-title" style="padding-bottom:20px;"><h1 style="color:#c30d23">品牌特色</h1></div><div class="col-4 "><div class="item item-ellipse"><div class="item-pad item-pad-1"></div><div class="item-ellipse"><h2>口味</h2><h3>KOUWEI</h3><p>味道要經過沉淀才能成熟主烤官項目以中創永信（北京）食品科學研究院13年如一日從原料，腌料，串法，烤法，蘸料多方面潛心鉆研。</p></div></div></div><div class="col-4"><div class="item item-ellipse"><div class="item-pad item-pad-2"></div><div class="item-ellipse"><h2>品味</h2><h3>PINWEI</h3><p>不平庸，不盲從，不怕錯敢去做是90后和00后的時代特征，主烤官從青春的品牌故事，創新的菜品口味，亮眼的包裝，多個方面為年輕群體打造屬于自己的燒烤店。</p></div></div></div><div class="col-4"><div class="item item-ellipse"><div class="item-pad item-pad-3"></div><div class="item-ellipse"><h2>回味</h2><h3>HUIWEI</h3><p>再好的青春，回憶的次數多了味道也就淡了。主烤官用心將青春的味道化作一道道美食完整的保留下來，為每位食客記錄記憶中的青春，讓每次回憶逗有滋有味。</p></div></div></div></div></div> </section>  <section id="philosophy"><div class="container"><div class="row"><div class="item-title" style="padding-bottom:30px"><h1>新聞</h1></div><div class="col-5 item-news"><div class="item-lists"><div class="news-img"><a href="#"><img src="img/bj/news.jpg" alt=""></a></div><div class="news-text"><h4><a href="news-page.html">烤天下成都新店開張</a></h4><p>個性定位，打造極致體驗，新店開張火爆成都，要玩要嗨就來烤天下，預定電話 8020113</p><p class="news-large">04-20</p><p>2017</p></div></div></div><div class="col-7 item-axis"><div class="item-axis-list clearfix"><div class="item-sou"><form action=""><input type="text" placeholder="搜索以前的文章"><i class="icon-sou"></i><button>搜索</button></form></div><div class="it_expert3"><div id="hot_ranks2"><ul class="clearfix current" style="display:block"><li><a href="news-page.html"><div class="axis-time"><h4>05-16</h4><span>2017</span></div><div class="axis-title"><h5>烤天下創始人做客2017央視元宵晚會</h5><p>個性定位，打造極致體驗，新店開張火爆成都，要玩要嗨就來烤天下，預定電話 010-8020113</p></div></a></li><li><a href="#"><div class="axis-time"><h4>04-12</h4><span>2017</span></div><div class="axis-title"><h5>夏天燒烤季你的舌尖歸我們</h5><p>如何讓燒烤愛好者們從路邊攤挪到干凈的廳堂里吃燒烤？這是一個餐飲習慣的遷移問題，要打通遷移的通道，首</p></div></a></li><li><a href="#"><div class="axis-time"><h4>04-08</h4><span>2017</span></div><div class="axis-title"><h5>做品牌，跳出套路才更有價值</h5><p>一個有生命力的品牌對于用戶群體來說像一塊具有內循環功能的海綿，不斷的吸收，然后反作用于自身來變得更強大，從而達到更大的體量</p></div></a></li></ul><ul class="clearfix current" style="display:none"><li><a href="#"><div class="axis-time"><h4>04-01</h4><span>2017</span></div><div class="axis-title"><h5>我們的初心，就是讓創業者們成功</h5><p>在風起云涌的餐飲江湖，烤天下異軍突起，不僅憑借強勢的酒吧燒烤文化刷新了燒烤行業的標準</p></div></a></li><li><a href="#"><div class="axis-time"><h4>03-28</h4><span>2017</span></div><div class="axis-title"><h5>丹麥最近有點憂傷，</h5><p> 夏天吃燒烤有三怕，第一是嗆煙四起眼淚咳嗽喝著肉一起吃；第二是鄰座光膀子擼串嗨起的食客辣眼睛</p></div></a></li><li><a href="#"><div class="axis-time"><h4>03-26</h4><span>2017</span></div><div class="axis-title" style="border-bottom:none"><h5>烤天下成都新店開張</h5><p>個性定位，打造極致體驗，新店開張火爆成都，要玩要嗨就來烤天下，預定電話 010-8020113</p></div></a></li></ul><ul class="clearfix current" style="display:none"><li><a href="#"><div class="axis-time"><h4>03-22</h4><span>2017</span></div><div class="axis-title"><h5>2烤天下成都新店開張</h5><p>個性定位，打造極致體驗，新店開張火爆成都，要玩要嗨就來烤天下，預定電話 010-8020113</p></div></a></li><li><a href="#"><div class="axis-time"><h4>03-21</h4><span>2017</span></div><div class="axis-title"><h5>烤天下成都新店開張</h5><p>個性定位，打造極致體驗，新店開張火爆成都，要玩要嗨就來烤天下，預定電話 010-8020113</p></div></a></li><li><a href="#"><div class="axis-time"><h4>03-18</h4><span>2017</span></div><div class="axis-title" style="border-bottom:none"><h5>烤天下成都新店開張</h5><p>個性定位，打造極致體驗，新店開張火爆成都，要玩要嗨就來烤天下，預定電話 010-8020113</p></div></a></li></ul></div></div><div class="button-cut"><span id="it_awewe" class="it_awewe"><a href="javascript:volid(0);" class="cut-up it_expertspan1" id="previous2"></a><a href="javascript:volid(0);" class="cut-dow it_expertspan2" id="next2"></a></span></div></div></div></div></div> </section> <section id="net"><div class="container"><div class="row"><div class="col-3"><div class="items"><img src="img/icon/f-1.png" alt=""><h3>半成品輸出，極速配送</h3></div></div><div class="col-3"><div class="items"><img src="img/icon/f-2.png" alt=""><h3>優質產地，嚴格品控</h3></div></div><div class="col-3"><div class="items"><img src="img/icon/f-3.png" alt=""><h3>品類齊全，口味豐富</h3></div></div><div class="col-3"><div class="items"><img src="img/icon/f-4.png" alt=""><h3>菜品創新，活動迭代</h3></div></div></div></div> </section> <footer id="footer"><div class="container"><div class="copy">?AUI 素材網京ICP備15006025號-1</div><div class="copy">Copyright ? 2012-2016 www.a-ui.cn <span>地址：北京市海淀區北三環西路43號中航廣場6層</span></div></div> </footer></body> </html>

CSS樣式代碼💒

html,body {margin:0;padding:0;height:100%; font-family: PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Microsoft Yahei,\\5FAE軟雅黑,STHeiti,\\534E文細黑,sans-serif;background:#302a34;}* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} button:focus { outline:none;} a {text-decoration:none;color:#000;} ul{padding:0; margin:0;} li{padding:0; margin:0; list-style:none} img {border:0;} hr {height:0;margin-top:10px;margin-bottom:10px;border:0;border-top:solid 1px #353c48;}#header {background:#444250;position:fixed;top:0;left:0;right:0;z-index:20;}.brand {display:block;overflow:hidden;width:101px;height:32px;margin:9px 0;text-indent:-999px;background:url("../img/icon/site-brand.png") no-repeat center top;-moz-background-size:cover;-webkit-background-size:cover;background-size:cover;}@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx){.brand {background-image:url("../img/icon/site-brand@2x.png");} }.navbar-toggle {float:right;width:40px;height:32px;margin:9px 0;border:0;padding:5px 9px;background:none;cursor:pointer;} .navbar-toggle .icon-bar {display:block;width:22px;height:2px;background:#fff;-webkit-transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);} .navbar-toggle .icon-bar + .icon-bar {margin-top:4px;}.navbar-toggle.active .icon-bar {position:absolute;margin:0;} .navbar-toggle.active .icon-bar:nth-child(1) {-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .navbar-toggle.active .icon-bar:nth-child(2) {opacity:0;} .navbar-toggle.active .icon-bar:nth-child(3) {-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}.navbar {display:none;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, .5);box-shadow:inset 0 1px 0 rgba(255, 255, 255, .5);} .nav {margin:5px 0;padding-left:0;} .nav li {list-style:none;border-top:solid 1px rgba(255,255,255,.2);position:relative;} .nav li:first-child {border-top:0;} .nav li a {display:block;padding:20px 15px;font-size:16px;color:#fff;} .nav li.active a {background:#c30e23; color:#dfd1b5} .collapse {display:block;overflow:hidden;overflow-y:auto;visibility:visible;-webkit-transition-timing-function: ease;transition-timing-function: ease;-webkit-transition-duration: .35s;transition-duration: .35s;-webkit-transition-property: height, visibility;transition-property: height, visibility;}

八、更多干貨🎁

1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！

2.💗【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、期末大作業模板、等! 「在這里有好多前端開發者，一起探討前端 Node 知識，互相學習」！

3.以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻🔥

總結

以上是生活随笔為你收集整理的基于HTML+CSS+JavaScript制作美食文化网站 ——卡通创意的烧烤(5个页面) html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： MT6763/P23处理器资料介绍
下一篇： AFNetworking Post Ra