国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > HTML5期末大作業(yè)：甜品店網(wǎng)站設(shè)計——美食甜品店鋪加盟企業(yè)(1頁) HTML+CSS+JavaS

HTML5期末大作業(yè)：甜品店網(wǎng)站設(shè)計——美食甜品店鋪加盟企業(yè)(1頁) HTML+CSS+JavaS

時間：2023-09-10 11:36:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-10 11:36:02 來源：網(wǎng)站運(yùn)營

HTML5期末大作業(yè)：甜品店網(wǎng)站設(shè)計——美食甜品店鋪加盟企業(yè)(1頁) HTML+CSS+JavaScript web期末作業(yè)設(shè)計網(wǎng)頁_美食網(wǎng)頁設(shè)計作業(yè)成品：

HTML5期末大作業(yè)：甜品店網(wǎng)站設(shè)計——美食甜品店鋪加盟企業(yè)(1頁) HTML+CSS+JavaScript web期末作業(yè)設(shè)計網(wǎng)頁_美食網(wǎng)頁設(shè)計作業(yè)成品

常見網(wǎng)頁設(shè)計作業(yè)題材有 個人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他 等網(wǎng)頁設(shè)計題目, A+水平作業(yè), 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計需求, 喜歡的可以下載!

獲取更多源碼

PC電腦端關(guān)注我們

作者主頁-更多源碼

HTML期末大作業(yè)文章專欄

作品介紹

1.網(wǎng)頁作品簡介 ：HTML期末大學(xué)生網(wǎng)頁設(shè)計作業(yè) A+水平 ,喜歡的可以下載，文章頁支持手機(jī)PC響應(yīng)式布局。

2.網(wǎng)頁作品編輯：作品下載后可使用任意HTML編輯軟件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML軟件編輯修改網(wǎng)頁）。

3.網(wǎng)頁作品技術(shù)：Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設(shè)計了logo（源文件），基本期末作業(yè)所需的知識點(diǎn)全覆蓋。

@TOC

一、作品展示







二、文件目錄







三、代碼實(shí)現(xiàn)

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>甜品加盟首頁</title> <link rel="stylesheet" type="text/css" href="statics/css/swiper.min.css" /> <link rel="stylesheet" type="text/css" href="statics/css/style.css" /> <script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--頂部導(dǎo)航--> <div class="header"> <div class="top-bar"> <div class="w1200"> <div class="l">期待您的加入！</div> <div class="r"> <span class="address">總店地址：杭州市海淀區(qū)某某街某號</span> <span>加盟熱線：<span class="red">188-XXXX-XXXX</span></span> </div> </div> </div> <div class="w1200"> <div class="logo"> <a href="#"><img src="statics/images/logo.png" /></a> </div> <div class="nav"> <ul> <li> <a class="active" href="#">首頁</a> </li> <li> <a href="#">成功案例</a> </li> <li> <a href="#">加盟熱線</a> </li> <li> <a href="#">員工培訓(xùn)</a> </li> <li> <a href="#">聯(lián)系我們</a> </li> <li> <a href="#">關(guān)于我們</a> </li> </ul> </div> </div> </div> <!--輪播圖--> <div class="slider swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <img src="statics/images/slider.jpg" /> <div class="w1200"> <div class="slider-txt"> <div class="title">芒果草莓奶油蛋糕</div> <div class="sub-title">冬季爆款 / 超高顏值 / 網(wǎng)紅食品</div> <a href="#" class="btn"><span>立即加盟</span></a> </div> </div> </li> <li class="swiper-slide"> <img src="statics/images/slider.jpg" /> <div class="w1200"> <div class="slider-txt"> <div class="title">芒果草莓奶油蛋糕</div> <div class="sub-title">冬季爆款 / 超高顏值 / 網(wǎng)紅食品</div> <a href="#" class="btn"><span>立即加盟</span></a> </div> </div> </li> <li class="swiper-slide"> <img src="statics/images/slider.jpg" /> <div class="w1200"> <div class="slider-txt"> <div class="title">芒果草莓奶油蛋糕</div> <div class="sub-title">冬季爆款 / 超高顏值 / 網(wǎng)紅食品</div> <a href="#" class="btn"><span>立即加盟</span></a> </div> </div> </li> </ul> <div class="arrow"> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> <!--特色服務(wù)--> <div class="services"> <div class="w1200"> <ul> <li> <img src="statics/images/icon-tianpin.png"/> <p class="title">甜品定制</p> <p class="desc">對員工集體培訓(xùn)，聘請國際甜品大師授課包教包會對員工集體培訓(xùn)，聘請國際甜品大師授課包教包會</p> </li> <li> <img src="statics/images/icon-yinpin.png"/> <p class="title">特制飲品</p> <p class="desc">對員工集體培訓(xùn)，聘請國際甜品大師授課包教包會對員工集體培訓(xùn)，聘請國際甜品大師授課包教包會</p> </li> <li> <img src="statics/images/icon-xuanzhi.png"/> <p class="title">門店選址</p> <p class="desc">對員工集體培訓(xùn)，聘請國際甜品大師授課包教包會對員工集體培訓(xùn)，聘請國際甜品大師授課包教包會</p> </li> </ul> </div> </div> <!--關(guān)于我們--> <div class="about"> <div class="w1200"> <div class="l"> <h2>關(guān)于我們</h2> <p>17甜點(diǎn)有限公司總部位于杭州，在杭州、杭州、杭州、杭州等30個地區(qū)設(shè)有分店，每年銷售額突破一個億17甜點(diǎn)有限公司總部位于杭州，在杭州、杭州、杭州、杭州等30個地區(qū)設(shè)有分店，每年銷售額突破一個億</p> </div> <div class="r"> <div class="about-pic"> <div class="about-pic-l"> <div class="about-pic-l-t"> <img src="statics/images/about1.jpg"/> </div> <div class="about-pic-l-b"> <img src="statics/images/about2.jpg"/> <img src="statics/images/about3.jpg"/> </div> </div> <div class="about-pic-l"> <img src="statics/images/about4.jpg"/> </div> </div> </div> </div> </div> <!--產(chǎn)品--> <div class="product"> <div class="w1200"> <h2 class="title">加盟產(chǎn)品</h2> <p class="sub-title">Franchised products </p> <div class="pro-box"> <div class="pro-cate"> <ul> <li class="active">店長推薦</li> <li>熱賣爆款</li> <li>優(yōu)質(zhì)甜品</li> <li>鮮榨飲品</li> <li>營養(yǎng)蛋糕</li> <li>鮮榨飲品</li> <li>營養(yǎng)蛋糕</li> </ul> </div> <div class="pro-list"> <div class="pro-list-slider swiper-container2 active"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾十個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾十個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> </ul> <div class="arrow"> <span class="arrow-next"></span> <span class="arrow-prev"></span> </div> </div> <div class="pro-list-slider swiper-container2"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾百個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾百個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> </ul> <div class="arrow"> <span class="arrow-next"></span> <span class="arrow-prev"></span> </div> </div> <div class="pro-list-slider swiper-container2"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾千個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾千個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> </ul> <div class="arrow"> <span class="arrow-next"></span> <span class="arrow-prev"></span> </div> </div> <div class="pro-list-slider swiper-container2"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾萬個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾萬個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> </ul> <div class="arrow"> <span class="arrow-next"></span> <span class="arrow-prev"></span> </div> </div> <div class="pro-list-slider swiper-container2"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾十個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾十個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> </ul> <div class="arrow"> <span class="arrow-next"></span> <span class="arrow-prev"></span> </div> </div> <div class="pro-list-slider swiper-container2"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾百個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾百個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> </ul> <div class="arrow"> <span class="arrow-next"></span> <span class="arrow-prev"></span> </div> </div> <div class="pro-list-slider swiper-container2"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾千個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> <li class="swiper-slide"> <a href="#"> <img src="statics/images/jiameng1.jpg"/> <div class="desc">經(jīng)過統(tǒng)計幾千個加盟店的數(shù)據(jù)顯示，此款產(chǎn)品最受消費(fèi)者喜愛，店長親自推薦，包教包會</div> </a> </li> </ul> <div class="arrow"> <span class="arrow-next"></span> <span class="arrow-prev"></span> </div> </div> </div> </div> </div> </div> <!--團(tuán)隊--> <div class="team"> <div class="w1200"> <h2 class="title">管理團(tuán)隊</h2> <p class="sub-title">Management team </p> <div class="team-list swiper-container3"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <div class="item"> <a href=""> <img src="statics/images/team1.png"/> <p class="name">17素材</p> <p class="duty">米其林特約糕點(diǎn)師</p> <p class="desc">在國外學(xué)習(xí)5年，為17甜點(diǎn)培訓(xùn)數(shù)以萬計的糕點(diǎn)師在國外學(xué)習(xí)5年，為17甜點(diǎn)培訓(xùn)數(shù)以萬計的糕點(diǎn)師</p> </a> </div> </li> <li class="swiper-slide"> <div class="item"> <a href=""> <img src="statics/images/team1.png"/> <p class="name">17素材</p> <p class="duty">米其林特約糕點(diǎn)師</p> <p class="desc">在國外學(xué)習(xí)5年，為17甜點(diǎn)培訓(xùn)數(shù)以萬計的糕點(diǎn)師在國外學(xué)習(xí)5年，為17甜點(diǎn)培訓(xùn)數(shù)以萬計的糕點(diǎn)師</p> </a> </div> </li> <li class="swiper-slide"> <div class="item"> <a href=""> <img src="statics/images/team1.png"/> <p class="name">17素材</p> <p class="duty">米其林特約糕點(diǎn)師</p> <p class="desc">在國外學(xué)習(xí)5年，為17甜點(diǎn)培訓(xùn)數(shù)以萬計的糕點(diǎn)師在國外學(xué)習(xí)5年，為17甜點(diǎn)培訓(xùn)數(shù)以萬計的糕點(diǎn)師</p> </a> </div> </li> <li class="swiper-slide"> <div class="item"> <a href=""> <img src="statics/images/team1.png"/> <p class="name">17素材</p> <p class="duty">米其林特約糕點(diǎn)師</p> <p class="desc">在國外學(xué)習(xí)5年，為17甜點(diǎn)培訓(xùn)數(shù)以萬計的糕點(diǎn)師在國外學(xué)習(xí)5年，為17甜點(diǎn)培訓(xùn)數(shù)以萬計的糕點(diǎn)師</p> </a> </div> </li> </ul> </div> <div class="team-arrow"> <span class="team-arrow-next"></span> <span class="team-arrow-prev"></span> </div> </div> </div> <!--尾部--> <div class="footer"> <div class="w1200"> <div class="form"> <span>線上聯(lián)系&nbsp;:</span> <form action=""> <input type="text" name="name" placeholder="請輸入您的姓名" /> <input type="text" name="tel" placeholder="請輸入您的聯(lián)系方式" /> <input type="text" name="city" placeholder="請輸入加盟城市名稱" /> <input type="submit" value="提交" class="submit"/> </form> </div> <div class="line"> <p> <span class="t">加盟熱線&nbsp;:</span> <span class="pink">188-XXXX-XXXX</span> </p> <p> <span class="t">售后服務(wù)&nbsp;:</span> <span class="pink">188-XXXX-XXXX</span> </p> <p> <span class="t">售后服務(wù)&nbsp;:</span> <span class="pink">188-XXXX-XXXX</span> </p> </div> <div class="footer-nav"> <div class="l"> <dl> <dt><a href="">加盟產(chǎn)品</a></dt> <dd><a href="">店長推薦</a></dd> <dd><a href="">熱賣爆款</a></dd> <dd><a href="">優(yōu)質(zhì)甜品</a></dd> <dd><a href="">鮮榨飲品</a></dd> <dd><a href="">營養(yǎng)蛋糕</a></dd> </dl> <dl> <dt><a href="">關(guān)于我們</a></dt> <dd><a href="">總部地址</a></dd> <dd><a href="">分店數(shù)據(jù)</a></dd> <dd><a href="">團(tuán)隊人員</a></dd> <dd><a href="">培訓(xùn)過程</a></dd> </dl> <dl> <dt><a href="">加入我們</a></dt> <dd><a href="">招聘信息</a></dd> <dd><a href="">工作環(huán)境</a></dd> <dd><a href="">福利補(bǔ)貼</a></dd> <dd><a href="">團(tuán)建活動</a></dd> </dl> </div> <div class="r"> <div class="wx"> <img src="statics/images/qr1.jpg"/> <p>17素材甜點(diǎn)公眾號</p> </div> <div class="wb"> <img src="statics/images/qr1.jpg"/> <p>17素材甜點(diǎn)微博</p> </div> </div> </div> </div> </div> <div class="copyright"> 17素材 Copyright ? 2014-2020 17素材網(wǎng)絡(luò)科技有限公司 <a href="#">滬ICP備17033508號-5</a> </div> </body></html><script type="text/javascript"> //導(dǎo)航固定 $(window).scroll(function() { var height = $(document).scrollTop() if(height > 150) { $('.header').addClass('fixed') } else { $('.header').removeClass('fixed') } }) //輪播圖開始 var swiper = new Swiper('.swiper-container', { nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', loop: true, autoplay: 5000 }); //加盟產(chǎn)品 $('.pro-cate ul li').hover(function(){ var index = $(this).index(); $(this).addClass('active').siblings().removeClass('active'); $('.pro-list .pro-list-slider').removeClass('active').eq(index).addClass('active'); }) var swiper = new Swiper('.swiper-container2', { nextButton: '.arrow-next', prevButton: '.arrow-prev', loop: true, observer:true, observeParents:true }); //團(tuán)隊 var swiper = new Swiper('.swiper-container3', { nextButton: '.team-arrow-next', prevButton: '.team-arrow-prev', slidesPerView: 3, loop: true, observer:true, observeParents:true }); </script>





四、獲取更多源碼

~ 關(guān)注我，點(diǎn)贊博文~ 每天帶你漲知識!

相關(guān)問題可以相互學(xué)習(xí)，可關(guān)注↓公Z號 獲取更多源碼 !



五、學(xué)習(xí)資料

web前端 零基礎(chǔ)-入門到高級 (視頻+源碼+開發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程) 適合入門到高級的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站




六、更多源碼

HTML5期末考核大作業(yè)源碼 包含 個人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他* 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計需求, 喜歡的可以下載!



關(guān)鍵詞：店鋪,企業(yè),設(shè)計,作業(yè),甜品

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉