HTML期末作业-牛排美食餐厅网站
生活随笔
收集整理的這篇文章主要介紹了
HTML期末作业-牛排美食餐厅网站
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一個使用了HTML和CSS及Jquery完成的網頁建設，具有首頁，美食簡介，店面簡介，品牌故事，關于我們等頁面，是一個簡單的企業項目，耗時3天完成，主要jQuery應用的方面有輪播圖，分頁器點擊切換，tabs標簽頁切換等常用的js交互，本次項目的js交互沒有使用插件，純手寫代碼。同時感謝H-ui的樣式重置，本項目使用了H-ui的框架的樣式重置代碼。
頁面截圖
?頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>首頁</title><link href="css/H-ui.reset.css" type="text/css" rel="stylesheet"><link href="css/main.css" type="text/css" rel="stylesheet"><link href="css/index.css" type="text/css" rel="stylesheet"><script src="js/jquery-1.11.0.js"></script><script src="js/porject.js"></script> </head> <body> <!--頭部--> <header><img src="img/logo.png"><ul><li ><a href="index.html" class="maina select">首頁</a></li><li > <a href="pinpai.html" class="maina">品牌故事</a></li><li><a href="meishi.html" class="maina">美食系列</a></li><li ><a href="shop.html" class="maina">店面展示</a></li><li ><a href="about-us.html" class="maina">關于我們</a></li></ul> </header> <!--內容--> <!--幻燈片--> <div class="Slides"><ul class="pics"><li ><img src="img/banner1.jpg" width="1920px" height="500px"></li><li ><img src="img/banner1.jpg" width="1920px" height="500px"></li><li ><img src="img/banner1.jpg" width="1920px" height="500px"></li></ul><div id="buttons"><span class="picsli on" index="1"></span><span class="picsli" index="1"></span><span class="picsli" index="1"></span></div><a id="prev" class="unslider-arrow04 prev "><img src="img/l.png"></a><a id="next" class="unslider-arrow04 next"><img src="img/r.png"></a> </div> <!--新品推薦--> <div class="new"><p id="new_text">新品推薦</p><div class="new_img show" index="0"><ul><li class="newfood-item newfood-right newfood-li1"><a href="meishi-con.html" class="newfood-p1">茶漱海鮮湯</a></li><li class="newfood-item newfood-right newfood-li2"><a href="meishi-con.html" class="newfood-p2">玉米海螺溝</a></li><li class="newfood-item newfood-right newfood-li3"><a href="meishi-con.html" class="newfood-p3">芝士蛋糕卷</a></li><li class="newfood-item newfood-li4"><a href="meishi-con.html" class="newfood-p4">芝士大蝦</a></li><li class="newfood-item newfood-right newfood-li5"><a href="meishi-con.html" class="newfood-p5">西冷牛排</a></li><li class="newfood-item newfood-right newfood-li6"><a href="meishi-con.html" class="newfood-p6">草莓布丁杯</a></li><li class="newfood-item newfood-right newfood-li7"><a href="meishi-con.html" class="newfood-p7">黑椒牛排</a></li><li class="newfood-item newfood-li8"><a href="meishi-con.html" class="newfood-p8">茶漱海鮮湯</a></li></ul></div><div class="new_img" index="1"><ul><li class="newfood-item newfood-right newfood-li5"><a href="meishi-con.html" class="newfood-p5">西冷牛排</a></li><li class="newfood-item newfood-right newfood-li6"><a href="meishi-con.html" class="newfood-p6">草莓布丁杯</a></li><li class="newfood-item newfood-right newfood-li7"><a href="meishi-con.html" class="newfood-p7">黑椒牛排</a></li><li class="newfood-item newfood-li8"><a href="meishi-con.html" class="newfood-p8">茶漱海鮮湯</a></li><li class="newfood-item newfood-right newfood-li1"><a href="meishi-con.html" class="newfood-p1">茶漱海鮮湯</a></li><li class="newfood-item newfood-right newfood-li2"><a href="meishi-con.html" class="newfood-p2">玉米海螺溝</a></li><li class="newfood-item newfood-right newfood-li3"><a href="meishi-con.html" class="newfood-p3">芝士蛋糕卷</a></li><li class="newfood-item newfood-li4"><a href="meishi-con.html" class="newfood-p4">芝士大蝦</a></li></ul></div><div class="new_img" index="2"><ul><li class="newfood-item newfood-right newfood-li3"><a href="meishi-con.html" class="newfood-p3">芝士蛋糕卷</a></li><li class="newfood-item newfood-li4"><a href="meishi-con.html" class="newfood-p4">芝士大蝦</a></li><li class="newfood-item newfood-right newfood-li1"><a href="meishi-con.html" class="newfood-p1">茶漱海鮮湯</a></li><li class="newfood-item newfood-right newfood-li2"><a href="meishi-con.html" class="newfood-p2">玉米海螺溝</a></li><li class="newfood-item newfood-right newfood-li7"><a href="meishi-con.html" class="newfood-p7">黑椒牛排</a></li><li class="newfood-item newfood-right newfood-li5"><a href="meishi-con.html" class="newfood-p5">西冷牛排</a></li><li class="newfood-item newfood-right newfood-li6"><a href="meishi-con.html" class="newfood-p6">草莓布丁杯</a></li><li class="newfood-item newfood-li8"><a href="meishi-con.html" class="newfood-p8">茶漱海鮮湯</a></li></ul></div><div class="clearfix" id="newfood-span"><span style="background: url(img/icon-2.png);" index="0"></span><span index="1"></span><span index="2"></span></div> </div> <!--公司簡介--> <div class="company"><div id="company_div"><p id="company_profile">公司簡介</p><img src="img/pic1.png"><div id="company_text"><p>貴族食代牛排是昔日的臺灣首富、臺灣知名企業貴族食代集團董事長王永慶先生招待貴賓的知名私房料理。嚴選一頭牛的第六至第八對肋骨這六塊牛排。是以“一頭牛僅供6客”的貴族食代牛排為招牌菜的中高價位直營連鎖西餐廳，獨具中國口味，全熟牛排，鮮嫩多汁，適合中國人口味，以菜色精致、好吃、服務好、風格高雅、管理專業著稱。</p><p>何謂經典，可能就是在品鑒無數美食后，其絕妙的滋味仍舊不能被替代。再次品味時，仍能激起內心的波瀾與感動。如此經典，我們將為您重新詮釋。全新的擺盤，搭配特制爽口的配菜，全熟風味，您不可辜負的舌尖美味。</p><p>2003年登陸大陸，截至目前，貴族食代牛排在上海、北京、深圳、廣州、南京、武漢、成都、重慶等地已經有40余家直營店，成為高端連鎖牛排的領導品牌。</p></div><!--新聞資訊--> </div> </div> <div class="news"><div id="news_div"><p id="news_information">新聞資訊</p><img src="img/pic2.jpg"><ul><li><a href="news-con.html"><p class="news_text">貴族食代牛排東莞厚街萬達餐廳開業</p><p class="news_timeText">2016-09-28</p></a></li><li><a href="news-con.html"><p class="news_text">貴族食代牛排無錫大成巷餐廳開業</p><p class="news_timeText">2016-09-23</p></a></li><li><a href="news-con.html"><p class="news_text">貴族食代牛排武漢黃陂廣場餐廳開業</p><p class="news_timeText">2016-09-20</p></a></li><li><a href="news-con.html"><p class="news_text">貴族食代牛排福州永嘉天地餐廳開業</p><p class="news_timeText">2016-09-17</p></a></li><li><a href="news-con.html"><p class="news_text">貴族食代牛排網絡大學第一批“學霸”亮相</p><p class="news_timeText">2016-09-14</p></a></li><li><a href="news-con.html"><p class="news_text" >華南市場2016半年度餐廳經理營運會召開</p><p class="news_timeText">2016-09-05</p></a></li><li><a href="news-con.html"><p class="news_text">浙江大區召開餐廳經理營運會議</p><p class="news_timeText">2016-09-23</p></a></li><li><a href="news-con.html"><p class="news_text">8月15日 貴族食代牛排武漢武商眾圓餐廳開業</p><p class="news_timeText" >2016-09-15</p></a></li></ul></div> </div> <!--友情鏈接--> <div class="footer"> <div class="link"><p id="friendship_link">友情鏈接</p><ul><li ><a href="javascript:;"><img src="img/link6.png"/></a></li><li ><a href="javascript:;"><img src="img/link5.png"/></a></li><li ><a href="javascript:;"><img src="img/link4.png"/></a></li><li ><a href="javascript:;"><img src="img/link3.png"/></a></li><li ><a href="javascript:;"><img src="img/link2.png"/></a></li><li ><a href="javascript:;"><img src="img/link1.png"/></a></li></ul> </div><div class="copyright"><p>CopyRight?2003-2021 All rigt rederved</p><p>版權所有：貴族食代牛排有限公司</p><p>ICP備案號：京ICP備xxxxxxxxxx</p></div> </div> </body> </html>?
總結
以上是生活随笔為你收集整理的HTML期末作业-牛排美食餐厅网站的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java8的时间工具类_JAVA8日期工
- 下一篇： WEB安全基础-PHP相关