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