期末作业成品代码——绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

其他 2022-04-27 20:42:26 阅读次数: 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>
	<meta name="keywords" content="筷之舞,筷之舞创意面吧,筷之舞加盟,加盟连锁,招商代理,餐饮美食,面食合作" />
	<meta name="description" content="面食为餐饮业的投资首选，其高回报、低风险的投资优势无可置疑。筷之舞创意面吧,为广大创业者创造了一个全面立体的餐饮创业服务平台，带领众多加盟者获得了人生的自主创业成功。" />	
	<link rel="stylesheet" href="style/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]-->
<script type="text/javascript" src="js/banner.js" ></script>	
</head>
<body>
	<div id="header">
		<div class="header_in">
			<h1><a href="#">筷之舞</a></h1>
			<ul class="nav">
				<li><a href="#">集团介绍</a></li>
				<li><a href="#">品牌基因</a></li>
				<li><a href="#">品牌优势</a></li>
				<li><a href="#">美食天地</a></li>
				<li><a href="#">招商专区</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
			<dl class="tel">
				<dt>咨询热线：</dt>
				<dd><img src="images/tel.png" width="182" height="22" alt="0335-7528866" /></dd>
			</dl>
		</div>
	</div>
	<div style="width:1200px;position:relative;height:0;overflow:hidden;margin:auto;"></div>
	<div id="shutter" class="shutter" >
		<ul>	
			<li><a href="#"><img src="images/banner4.jpg" alt="" /></a></li>
			<li><a href="#"><img src="images/banner1.jpg" alt="" /></a></li>
			<li><a href="#"><img src="images/banner2.jpg" alt="" /></a></li>
		</ul>
	</div>
	<div id="item">
		<dl class="item_01">
			<dt><img src="images/c1.jpg" width="278" height="228" alt="七彩摔拌面    参考价格" /></dt>
			<dd class="item">七彩摔拌面<a class="fcl" href="#">参考价格</a></dd>
			<dd class="item_sub">筷之舞-品牌项目</dd>
		</dl>
		<dl class="item_02">
			<dt>果蔬营养<br />高汤面系列</dt>
			<dd><img src="images/c2.jpg" width="180" height="180" alt="芙蓉鲜虾汤面" /></dd>
		</dl>
		<dl class="item_02" style="position: absolute;left:660px;">
			<dt>粗粮<br />养生面系列</dt>
			<dd><img src="images/c3.jpg" width="180" height="180" alt="浓香排骨汤面" /></dd>
		</dl>	
		<dl class="item_02" style="position: absolute;left:1020px;">
			<dt>精致<br />凉拌菜系列</dt>
		</dl>
		<dl class="item_02" style="position: absolute;left:300px;top:200px;">
			<dd><img src="images/c4.jpg" width="180" height="180" alt="芙蓉鲜虾汤面" /></dd>
		</dl>
		<dl class="item_02" style="position: absolute;left:480px;top:200px;">
			<dt>七彩<br />精巧摔拌面</dt>
			<dd><img src="images/c5.jpg" width="180" height="180" alt="芙蓉鲜虾汤面" /></dd>
		</dl>	
		<dl class="item_02" style="position: absolute;left:840px;top:200px;">
			<dt>过桥<br />锅烧面</dt>
			<dd><img src="images/c6.jpg" width="180" height="180" alt="芙蓉鲜虾汤面" /></dd>
		</dl>
	</div>
	<div id="show">
		<div class="left_s">
			<h3><a href="#">产品展示</a></h3>
			<ul>
				<li><a href="#"><img src="images/left_s.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/left_s.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/left_s.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/left_s.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/left_s.jpg" alt="" /></a></li>
			</ul>
		</div>
		<div class="right_s">
			<h3><a href="#">店铺展示</a></h3>
			<ul>
				<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
			</ul>			
		</div>
	</div>
	<div id="squeezebox">
		<div class="one">
			<h3><a href="#">加盟动态</a></h3>
			<div class="one_in">
				<p class="one_txt">
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
				</p>
				<p class="one_txt">
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
				</p>
				<p class="one_txt">
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
				</p>
				<p class="one_txt">
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
					<a href="#">热烈祝贺黄先生成功签约    [06-03]</a>
				</p>
			</div>
		</div>
		<div class="two">
			<h3><a href="#">品牌故事</a></h3>
			<p class="two_img"><a href="#"><img src="images/ppgs_1.jpg" alt="" /></a></p>
			<p class="two_txt">相传，乾隆皇帝一次微服南游，旅途劳累，
			途经一家面馆，便进店充饥。不料想，这民
			间小店的美食却让他如此意外，尤其是这七
			彩面条，看上去色彩斑斓，吃起来爽滑筋道
			。他叫来老板问其中奥秘，老板看他穿着打
			扮有所涵养，于是便给乾隆讲起这彩面的由
			来。原来，这家的面馆可以在一根面条上面
			做出不同种的颜色，就像有音符在面上舞动
			。这种彩面是通过提取新鲜水果蔬菜里面的
			维生素以及膳食纤维和白面混合加工而成。
			用筷子挑起彩色的面条搭配着秘制酱料吃到
			嘴里回味无穷。夹起面条的感觉就像少女翩
			翩起舞一样！乾隆皇帝听后拍手叫好，当即
			挥笔赐字“筷之舞”！<br />

			中国13亿人口，八亿的面食市场。面条作为
			民间大众食谱，深受中国人的喜爱，从北方
			到南方几乎似乎无人不爱吃面条。君唯集团
			总部几经周折，从御膳房第24代传人手上
			求得配方，瞄准中国面食市场， 在传统面条
			的基础之上经过改良……<a href="#">查看详情</a>
			</p>
		</div>
		<div class="three"><h3><a href="#">集团新闻</a></h3><p><a href="#"><img src="images/jtxw_1.jpg" alt="" /></a></p></div>
	</div>
	<div id="footer">
		<div class="sub_nav">
			<a href="#">官方首页</a> |  
			<a href="#">行业新闻</a> |  
			<a href="#">产品优势</a> |  
			<a href="#">项目优势</a> |  
			<a href="#">联系我们</a> 
		</div>
		<div class="footer_in">
			<div class="footer_c">
				<p class="footer_logo"><img src="images/tel_1.jpg" width="370" height="102" alt="" /></p>
				<p>地址：河北省秦皇岛海港区泛亚大厦9层</p>
				<p>君唯餐饮集团致力于<a href="#">餐饮加盟</a> | <a href="#">小吃加盟</a> | <a href="#">餐饮店加盟</a> | <a href="#">餐饮连锁加盟</a></p>
				<p><a href="#">筷之舞创意面吧加盟</a> | <a href="#">面食加盟</a> | <a href="#">君唯餐饮加盟</a> </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/kzw100.js" ></script>
<script type="text/javascript">
<!--
var shutterH = new Hongru.shutter.init('shutterH',{
      
      
	id:'shutter'
});
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
if (isIE){
      
      
	if (isIE6!="ie6"){
      
      

		changecss();	

		window.onresize = function(){
      
      
			changecss();
		}
	}
}
if (!isIE){
      
      


	changecss();	

	window.onresize = function(){
      
      
		changecss();
	}

}
function changecss(){
      
      
	var kuandu = document.documentElement.clientWidth;
	var shutterW=$("#shutter").width();
	var left=(kuandu-shutterW)/2;
	$("#shutter").css("left",left);
}
// -->
</script>

四、获取更多源码

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

猜你喜欢

转载自blog.csdn.net/m1_46321522/article/details/122292458
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
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)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022