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,特色菜,美食,农家菜,我们 来源： https://blog.csdn.net/qq_41101110/article/details/117946142