F19HTML5期末大作业：美食餐饮网站设计——酥麻辣祸-美食餐饮 HTML+CSS+JavaScript 学生DW网页设计

其他 2022-04-27 20:42:32 阅读次数: 0

HTML5期末大作业

文章目录

一、作品展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" href="css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="js/iepng.js"></script>
<script type="text/javascript">
	EvPNG.fix('body,div,ul,li,ol,dl,dt,dd,img,input,span,p,h1,h2,h3,h4,a,strong,textarea');
</script>
<![endif]-->	
</head>
<body>
	<div id="header">
		<div class="header_in">
			<h1 class="logo"><a href="index.html">酥麻辣锅</a></h1>
			<div class="logo_line"><h2 class="logo_h">酥麻辣锅SMLART</h2><strong class="logo_line1">香酥</strong><strong class="logo_line2">味麻</strong><strong class="logo_line3">川辣</strong><strong class="logo_line4">麻辣，也要很有范</strong></div>
		</div>
	</div>
	<div id="banner">
		<div class="banner_in">
			<ul>
				<li><a href="art.html"><img src="images/banner.jpg" alt="" /></a></li>
				<li><a href="art.html"><img src="images/banner.jpg" alt="" /></a></li>
			</ul>
		</div>	
		<div class="diaoqi">
			<ul>
				<li><a href="art.html"><img width="277" height="393" src="images/diao_1.png" alt="" /></a></li>
				<li><a href="art.html"><img width="277" height="393" src="images/diao_2.png" alt="" /></a></li>
				<li><a href="art.html"><img width="277" height="393" src="images/diao_3.png" alt="" /></a></li>
				<li><a href="art.html"><img width="277" height="393" src="images/diao_4.png" alt="" /></a></li>
				<li><a href="art.html"><img width="277" height="393" src="images/diao_5.png" alt="" /></a></li>
				<li><a href="art.html"><img width="277" height="393" src="images/diao_6.png" alt="" /></a></li>
			</ul>
		</div>
		<div id="nav" class="nav">
			<ul class="nav_in">
				<li><a href="index.html">首页</a></li>
				| 
				<li><a href="list.html">集团简介</a></li>
				| 
				<li><a href="list.html">品牌介绍</a></li>
				| 
				<li><a href="list.html">品牌前景</a></li>
				| 
				<li><a href="list.html">品牌优势</a></li>
				| 
				<li><a href="list.html">产品展示</a></li>
				| 
				<li><a href="list.html">加盟专区</a></li>
				| 
				<li><a href="list.html">创业支持</a></li>
				| 
				<li><a href="list.html">联系我们</a></li>
			</ul>
		</div>
	</div>
	<div id="show">
		<div class="show_l">
			<h3>豉香麻椒锅</h3>
			<p class="art">主题香锅系列<br />麻辣香锅源于重庆缙云山土家风味，以麻、辣、香、混一锅为特点。 每当有尊贵的客人时，就会以麻辣香锅来宴请客人，各种蔬菜、肉类和海鲜的鲜味，加入本身的香味，混合起来，就成了“一锅香”。</p>
			<ul class="show_l_in">
				<li><a href="art.html"><span></span><img src="images/grids_m_1.jpg" alt="豉香麻椒锅" /></a></li>
				<li><a href="art.html"><span></span><img src="images/grids_m_2.jpg" alt="川味红油锅" /></a></li>
				<li><a href="art.html"><span></span><img src="images/grids_m_3.jpg" alt="川味麻辣锅" /></a></li>
				<li><a href="art.html"><span></span><img src="images/grids_m_4.jpg" alt="胡椒木姜鱼锅" /></a></li>
				<li><a href="art.html"><span></span><img src="images/grids_m_5.jpg" alt="椒麻生炒鸡锅" /></a></li>
				<li><a href="art.html"><span></span><img src="images/grids_m_6.jpg" alt="咖喱花菜鸡锅" /></a></li>
				<li><a href="art.html"><span></span><img src="images/grids_m_7.jpg" alt="牦牛肉香锅" /></a></li>
				<li><a href="art.html"><span></span><img src="images/grids_m_8.jpg" alt="苗家甲鱼锅" /></a></li>
				<li><a href="art.html"><span></span><img src="images/grids_m_9.jpg" alt="舌尖酸汤鱼" /></a></li>
			</ul>
		</div>
		<div class="show_r">
			<ul class="show_r_in">
				<li class="cur"><a href="art.html"><img src="images/grids_1.jpg" alt="豉香麻椒锅" /></a></li>
				<li><a href="art.html"><img src="images/grids_2.jpg" alt="川味红油锅" /></a></li>
				<li><a href="art.html"><img src="images/grids_3.jpg" alt="川味麻辣锅" /></a></li>
				<li><a href="art.html"><img src="images/grids_4.jpg" alt="胡椒木姜鱼锅" /></a></li>
				<li><a href="art.html"><img src="images/grids_5.jpg" alt="椒麻生炒鸡锅" /></a></li>
				<li><a href="art.html"><img src="images/grids_6.jpg" alt="咖喱花菜鸡锅" /></a></li>
				<li><a href="art.html"><img src="images/grids_7.jpg" alt="牦牛肉香锅" /></a></li>
				<li><a href="art.html"><img src="images/grids_8.jpg" alt="苗家甲鱼锅" /></a></li>
				<li><a href="art.html"><img src="images/grids_9.jpg" alt="舌尖酸汤鱼" /></a></li>
			</ul>		
		</div>
	</div>
	<div id="show_shop">
		<div class="show_shop_l">
			<ul class="show_shop_l_in">
				<li class="cur"><a href="art.html"><img src="images/product_1.jpg" alt="" /></a></li>
				<li><a href="art.html"><img src="images/product_2.jpg" alt="" /></a></li>
				<li><a href="art.html"><img src="images/product_3.jpg" alt="" /></a></li>
				<li><a href="art.html"><img src="images/product_4.jpg" alt="" /></a></li>
				<li><a href="art.html"><img src="images/product_5.jpg" alt="" /></a></li>
			</ul>
			<ul class="show_shop_btn">
				<div>
					<li class="btn_cur"><a>1</a></li>
					<li><a>2</a></li>
					<li><a>3</a></li>
					<li><a>4</a></li>
					<li><a>5</a></li>
				</div>
			</ul>
		</div>
		<div class="show_shop_r">
		招商联络<br />
崔经理 电话：15232308886 0335-7673729<br />
地址：河北秦皇岛海港区迎宾路83号泛亚大厦9层
		</div>
	</div>	
	<div id="squeezebox">
		<div class="one">
			<h3><a href="list.html">加盟动态</a></h3>
			<div class="one_in">
				<p class="one_txt">
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
				</p>
				<p class="one_txt">
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
				</p>
				<p class="one_txt">
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
				</p>
				<p class="one_txt">
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="art.html">热烈祝贺黄先生成功签约    [06-03]</a>
				</p>
			</div>
		</div>
		<div class="two">
			<h3><a href="list.html">招商加盟</a></h3>
			<p class="two_txt">
				联系电话：<br />
				0335-7673729 <br />
				崔经理：<br />
				152-3230-8886<br />
				地址：<br />
				河北省<br />
				秦皇岛市<br />
				海港区<br />
				泛亚大厦9层
			</p>
			<p class="two_img">
				<a href="art.html"><img src="images/ppgs_1.jpg" alt="" /></a></p>
		</div>
		<div class="three"><h3><a href="list.html">集团新闻</a></h3><p><a href="art.html"><img src="images/jtxw_1.jpg" alt="" /></a></p></div>
	</div>
	<div id="footer">
		<div class="sub_nav">	
			<a href="index.html">网站首页</a> |  
			<a href="list.html">集团简介</a> |  
			<a href="list.html">品牌介绍</a> |  
			<a href="list.html">品牌前景</a> |  
			<a href="list.html">品牌优势</a> |  
			<a href="list.html">产品展示</a> |  
			<a href="list.html">加盟专区</a> |  
			<a href="list.html">创业支持</a> |  
			<a href="list.html">联系我们</a> 
		</div>
		<div class="footer_in">
			<div class="footer_c">		
				<p>君唯餐饮集团致力于<a href="index.html">餐饮加盟</a> | <a href="index.html">小吃加盟</a> | <a href="index.html">咕嘟咕嘟欢乐火锅加盟</a> | <a href="index.html">咕嘟小火锅加盟</a> | <a href="index.html">餐饮店加盟</a></p>
				<p>中国·秦皇岛海港区君唯餐饮有限公司 地址：河北省秦皇岛海港区泛亚大厦9层</p>	
				<p>招商热线：0335-7168889</p>				
			</div>
		</div>
	</div>	
</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/smlg100.js" ></script>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!

猜你喜欢

转载自blog.csdn.net/m1_46321522/article/details/122292365
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022