ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML期末作业-美食网站

2021-06-16 09:01:55  阅读:114  来源: 互联网

标签:网站 期末 饮料 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有