HTML期末作业-美食网站
生活随笔
收集整理的這篇文章主要介紹了
HTML期末作业-美食网站
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?美食網站HTML+CSS+JavaScript
部分代碼
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script><title>美食匯</title> <link rel="stylesheet" href="css/style.css"></head> <body><div class="nav"><ul class="uu-nav"><li class="logo">美食匯</li><li class="nav-lists"><a href="index.html">首頁</a> </li><li class="nav-lists"><a href="health.html">飲食健康</a> </li><li class="nav-lists"><a href="master.html">美食達人</a> </li><li class="nav-lists"><a href="caipu.html">菜譜大全</a> </li><li class="nav-lists"><a href="login.html">登錄</a> </li><li class="nav-lists"><a href="res.html">注冊</a> </li><li class="ico">三</li></ul><ul class="uu-lists"><li><a href="index.html">首頁</a> </li><li><a href="health.html">飲食健康</a> </li><li><a href="master.html">美食達人</a> </li><li><a href="caipu.html">菜譜大全</a> </li><li><a href="login.html">登錄</a> </li></ul></div><header><div id="benner"><div class="img"><img src="img/11.jpg" class="imga active"><img src="img/22.jpg" class="imga"><img src="img/33.jpg" class="imga"><img src="img/44.jpg" class="imga"><img src="img/55.jpg" class="imga"></div><ul class="title"><li class="nr active"></li><li class="nr"></li><li class="nr"></li><li class="nr"></li><li class="nr"></li></ul></div></header><nav><h3>關于我們</h3><p>一個享受美食與交流美食的地方，在這里我們可以發現有許多的特色美食，以及許多美食達人分享的營養膳食。 </p><ul id="traffic" class=""><li>"美食匯"給你不一樣的感覺！</li></ul></nav><div class="wrap"><h3>特性服務</h3><ul class="wrap-uu"><li><h2>美味的食物</h2><p>這里的食物既美味又有營養，美食多多，種類豐富，歡迎您的到來！</p></li><li><h2>各種飲料</h2><p>閑暇的時光與朋友品嘗一杯咖啡，聊聊家長里短也是一種不錯的方式！</p></li><li><h2>您的認可</h2><p>我們專致于服務，以最好的姿態服務您們，您肯定是對我們最大的支持！</p></li><li><h2>送貨上門</h2><p>我們為了更好服務客人，開通了外賣，讓您足不出戶就能享受美食！</p></li><li><h2>禮品贈送</h2><p>我們在雙“十二”推出了禮品贈送活動，禮品豐厚，期待您的參與！</p></li><li><h2>私人訂制</h2><p>在您的特殊日子，例如：生日，紀念日等我們接受您的特殊要求！</p></li></ul></div><nav style="height: 127px;"><h3>更多美食</h3></nav><div class="shop min-width"><ul class="uu-shop"><li class="shop-li">美食</li><li class="shop-li">飲料</li><li class="shop-li">甜點</li></ul><div class="shop-list shop-list1 "><ul class="uu-info"><li><div class="shop-img"><img src="img/a.jpg"/><p>水煮肉片</p></div></li><li><div class="shop-img"><img src="img/b.jpg"/><p>白灼蝦</p></div></li><li><div class="shop-img"><img src="img/c.jpg"/><p>上湯焗龍蝦</p></div></li></ul></div><div class="shop-list shop-list2 "><ul class="uu-info"><li><div class="shop-img"><img src="img/drink-1.jpg"/><p>飲料1</p></div></li><li><div class="shop-img"><img src="img/drink-2.jpg"/><p>飲料2</p></div></li><li><div class="shop-img"><img src="img/drink-3.jpg"/><p>飲料3</p></div></li></ul></div><div class="shop-list shop-list3 active"><ul class="uu-info"><li><div class="shop-img"><img src="img/img/5.jpg"/><p>水煮肉片</p></div></li><li><div class="shop-img"><img src="img/img/6.jpg"/><p>白灼蝦</p></div></li><li><div class="shop-img"><img src="img/img/7.jpg"/><p>上湯焗龍蝦</p></div></li></ul></div></div><div class="news "><ul class="min-width"><li><div class="news-img"><img src="img/pu1.jpg"/></div><h4>我們的特色菜</h4><p>我們有自己的特色菜，種類繁多，有家鄉菜、農家菜、也有各地著名美食。</p></li><li><div class="news-img"><img src="img/pu2.jpg"/></div><h4>我們的特色菜</h4><p>我們有自己的特色菜，種類繁多，有家鄉菜、農家菜、也有各地著名美食。</p></li><li><div class="news-img"><img src="img/pu3.jpg"/></div><h4>我們的特色菜</h4><p>我們有自己的特色菜，種類繁多，有家鄉菜、農家菜、也有各地著名美食。</p></li></ul></div><footer><p>友情鏈接 <a href="http://www.baidu.com">百度一下</a> <a href="http://www.baidu.com">美食網站</a> <a href="https://www.meishij.net/">美食街</a> <a href="http://life.hao123.com/menu">美食推薦</a> </p><p>美食匯網站開發——2019</p></footer><script type="text/javascript" src="js/index.js"> </script><script type="text/javascript" src="js/nav.js"> </script> </body> </html>總結
以上是生活随笔為你收集整理的HTML期末作业-美食网站的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java基础入门笔记-新建类
- 下一篇： C/C++中Windows API 简单