HTML5期末大作业
文章目录
一、作品展示
二、文件目录
三、代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="火锅餐饮" http-equiv="keywords">
<meta name="description" content="火锅餐饮,wangid">
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
<title>XXX餐饮集团</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.superslide.2.1.1.js"></script>
</head>
<body>
<!-- ie过低提示升级 -->
<!--[if lt IE 9]>
<style>
.upgrade{text-align:center;line-height: 40px; position:fixed; width:100%; height:100%; background:#fff; z-index:9999;}
.upgrade h2{margin:100px 0 50px 0;}
</style>
<div class="upgrade">
<h2>天啦！你的浏览器版本好低，看不到T_T，请升级浏览器再浏览吧^_^Y！</h2>
<h3>
<p>360浏览器下载：<a target="_blank" href="http://se.360.cn/">http://se.360.cn/</a></p>
<p>谷歌浏览器下载：<a target="_blank" href="https://www.google.cn/chrome/">https://www.google.cn/chrome/</a></p>
<p>IE浏览器下载：<a target="_blank" href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads">https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads</a></p>
</h3>
</div>
<![endif]-->
<!--头部-->
<div class="top_bg fix">
<div class="top_main">
<div class="logo">
<img src="picture/logo_top.png">
</div>
<div class="top_nav">
<h2><img src="picture/top_tel.png"><b>加盟热线：</b>XXX</h2>
<ul>
<li class="cur">
<a href="index.html">网站首页</a>
</li>
<li>
<a href="wjtcy.html">XXX餐饮</a>
<i></i>
<dl>
<dd><a href="wjtcy.html">抓一把串串火锅</a></dd>
<dd><a href="wjtcy.html">XXX火锅店</a></dd>
<dd><a href="wjtcy_about.html">关于我们</a></dd>
</dl>
</li>
<li>
<a href="wjtsp.html">XXX食品</a>
<i></i>
<dl>
<dd><a href="wjtcy.html">XXX食品</a></dd>
<dd><a href="wjtcy_about.html">关于我们</a></dd>
</dl>
</li>
<li>
<a href="join.html">招商加盟</a>
<i></i>
<dl>
<dd><a href="join.html">加盟优势</a></dd>
<dd><a href="join.html">加盟流程</a></dd>
<dd><a href="join.html">加盟支持</a></dd>
<dd><a href="join_wd.html">加盟问答</a></dd>
</dl>
</li>
<li><a href="stores.html">门店展示</a></li>
<li>
<a href="foods.html">菜品展示</a>
<i></i>
<dl>
<dd><a href="foods.html">火锅菜品</a></dd>
<dd><a href="foods.html">串串菜品</a></dd>
<dd><a href="foods.html">锅底系列</a></dd>
</dl>
</li>
<li><a href="newslist.html">新闻中心</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
<script type="text/javascript">
$(function(){
$(".top_nav ul li").hover(
function(){
$(this).find("dl").stop().fadeToggle(700)
}
)
})
</script>
</div>
</div>
</div>
<!-- 内容框 -->
<div class="contentbox">
<!-- banner -->
<div class="banner">
<div class="hd">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bd">
<ul>
<li><a href="#"><img src="picture/banner.jpg" /></a></li>
<li><a href="#"><img src="picture/banner01.jpg" /></a></li>
<li><a href="#"><img src="picture/banner.jpg" /></a></li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"><img src="picture/jt_left.png"></a>
<a class="next" href="javascript:void(0)"><img src="picture/jt_right.png"></a>
</div>
<script type="text/javascript">
jQuery(".banner").slide({mainCell:".bd ul",autoPlay:true,effect:"fold",delayTime:1000,mouseOverStop:false,});
</script>
<!-- banner end -->
<div class="content">
<!-- about -->
<div class="index_box index_box01">
<div class="wid_main">
<div class="title title_w">
<h1>我们的品牌</h1>
<p>开创餐饮业“中央厨房”新理念，步入餐饮工业化的新时代，打造最强正宗重庆火锅大品牌</p>
</div>
<div class="about_box">
<div>
<h2>重庆XXX餐饮管理有限公司<i></i></h2>
<div>
<img src="picture/pic01.jpg">
<p> 重庆XXX餐饮管理有限公司，是集团旗下从事餐饮管理与市场经营的全资子公司，下属管理子品牌有：XXX火锅、抓一把串串火锅。这两个品牌都是老字号火锅品牌，拥有众多群众基础，深得广大人民群众的喜爱，呈现出良好的发展态势，全国现有自营店、控股店、特许加盟店900余家...
</p>
</div>
<a href="wjtcy_about.html">了解更多>></a>
</div>
<div>
<h2>重庆XXX食品有限公司<i></i></h2>
<div>
<img src="picture/pic02.jpg">
<p> 重庆XXX食品有限公司，是集团旗下从事餐饮管理与市场经营的全资子公司，下属管理子品牌有：XXX火锅、抓一把串串火锅。这两个品牌都是老字号火锅品牌，拥有众多群众基础，深得广大人民群众的喜爱，呈现出良好的发展态势，全国现有自营店、控股店、特许加盟店900余家...
</p>
</div>
<a href="wjtcy_about.html">了解更多>></a>
</div>
</div>
</div>
</div>
<!-- 我们的菜品 -->
<div class="index_box index_box02">
<div class="wid_main">
<div class="title">
<h1>我们的菜品</h1>
</div>
</div>
</div>
<!-- footerbox end -->
<!-- side icon -->
<div class="side_box">
<ul>
<li>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1498023881&site=qq&menu=yes">
<span><img src="picture/side-qq.png"></span>
<p>在线咨询</p>
</a>
</li>
<li class="sidetop">
<a>
<span><img src="picture/side-back.png"></span>
<p>返回顶部</p>
</a>
</li>
</ul>
<script type="text/javascript">
$(function(){
$(".side_box").hide()
window.onscroll=function(){
var autoheight=document.body.scrollTop||document.documentElement.scrollTop;
if(autoheight>100){
$(".side_box").fadeIn(500)
}else{
$(".side_box").fadeOut(500)
}
}
$(".sidetop").click(
function(){
$('body,html').animate({"scrollTop":0},500);
}
)
})
</script>
</div>
</div>
<!-- content end -->
</div>
</body>
</html>
