300字范文 > 静态HTML网页设计作品——食品餐饮行业网站模板(10页) HTML+CSS+JavaScript 学生DW

静态HTML网页设计作品——食品餐饮行业网站模板(10页) HTML+CSS+JavaScript 学生DW

时间：2018-07-06 20:02:11

HTML5期末大作业

文章目录

HTML5期末大作业一、作品展示二、文件目录三、代码实现四、获取更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>XXX_首页</title><link rel="stylesheet" type="text/css" href="css/slf.css"/><script src="js/jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/javascript" src="js/banner.index.js"></script><script type="text/javascript" src="js/jquery.easing.js"></script><script type="text/javascript" src="js/slf.js"></script><script src="js/swiper.jquery.js"></script></head><body><div class="gray"><div id="headr"><ul id="nav"><li><a href="index.html">关于我们</a></li><li><a href="about.html">门店分布</a></li><li><a href="news.html">品牌活动</a></li><li><a href="#" class="logo"><img src="picture/logo.gif" width="120" height="75" alt=""/></a></li><li><a href="products.html">网络商城</a></li><li><a href="contact.html">产品中心</a></li><li><a href="zhaopin.html">联系我们</a></li><div class="clear"></div></ul></div></div><div class="banner"><div id="full-screen-slider"><ul id="slides"><li style="background:url(images/ban01.jpg) no-repeat center top"><a href=""></a></li><li style="background:url(images/ban02.jpg) no-repeat center top"><a href=""></a></li><li style="background:url(images/ban03.jpg) no-repeat center top"><a href=""></a></li><div class="clear"></div></ul></div></div><div class="main about"><div class="about_con l"><h2>公司简介</h2><p> 6月，“XXX”品牌正式开始企业化运作，总部落户于湖北省武汉市。是一家专门从事鸭类、鹅类、鸭副产品及素食类休闲熟卤制品深加工的品牌企业，截止到，XXX在职员工已超3000人，下属20多家子公司...</p><a href="#" class="view">View more</a> </div><div class="about_rig r"><div class="video"><img src="picture/video.gif" width="736" height="410" alt=""/></div></div></div><div class="clear"></div><div class="main"><div class="inTit1" style="background:url(images/intit1.png) no-repeat center center"></div><div class="kv"><ul class="kv_pic"><li><img src="picture/1.jpg" alt="" /></li><li><img src="picture/2.jpg" alt="" /></li><li><img src="picture/3.jpg" alt="" /></li><li><img src="picture/2.jpg" alt="" /></li></ul><div class="kv_word"><ul><li><div class="tit"><h2>缘起</h2><div class="bg">a</div><span class="en">SINCE THE EDGE</span></div><div class="clear"></div><div class="f1">1997-</div><div class="wordCon"><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p></div></li><li><div class="tit"><h2>缘起</h2><div class="bg">a</div><span class="en">SINCE THE EDGE</span></div><div class="clear"></div><div class="f1">1997-</div><div class="wordCon"><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p></div></li><li><div class="tit"><h2>缘起</h2><div class="bg">a</div><span class="en">SINCE THE EDGE</span></div><div class="clear"></div><div class="f1">1997-</div><div class="wordCon"><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p></div></li><li><div class="tit"><h2>缘起</h2><div class="bg">a</div><span class="en">SINCE THE EDGE</span></div><div class="clear"></div><div class="f1">1997-</div><div class="wordCon"><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p><p> 1997年---- “XXX”创始人周富裕先生在湖北省武汉市航空路电业集贸市场开设了“XXX”品牌前身“周记怪味鸭”卤制品专卖店。 </p><p> ----根据产品特点，品牌由“周记怪味鸭”升级为“周记黑鸭”，同年，通过商标注册申请，正式迈出了品牌建设的第一步，最终确定为“XXX”。 </p><p> ----通过在湖北省武汉市江岸区谌家矶大道72号注册成立公司，“XXX”正式完成了从传统生产方式到规模化生产方式的跨越。 </p></div></li></ul></div><div class="control"><div class="prev"><img src="picture/icons_move_left.jpg" alt="" /></div><div class="next"><img src="picture/icons_move_right.jpg" alt="" /></div></div><div class="kv_dot"><ul><li class="action"></li><li></li><li></li><li></li></ul></div></div></div><div class="gray2"></div><div class="main"><div class="inTit2" style="background-image: url(images/intit2.png);"></div><ul class="HotNew"><dl><dt><a href="#"><img src="picture/new1.jpg" width="340" height="250" alt=""/></a></dt><dd><h2>XXX在中国：向我们引以为豪的伙伴致敬。</h2><p>我们努力工作，就是希望能与朋友们分享美味醇厚的咖啡。并努力让世界变得更美好一点。这就是1971我们开设第一家XXX咖啡店时的理念，如今我们依然秉承这样的理念。了解我们的故事</p><a href="#">了解更多</a> </dd></dl><dl><dt><a href="#"><img src="picture/new1.jpg" width="340" height="250" alt=""/></a></dt><dd><h2>XXX在中国：向我们引以为豪的伙伴致敬。</h2><p>我们努力工作，就是希望能与朋友们分享美味醇厚的咖啡。并努力让世界变得更美好一点。这就是1971我们开设第一家XXX咖啡店时的理念，如今我们依然秉承这样的理念。了解我们的故事,家XXX咖啡店时的理念，如今我们依然秉承这样的理念。 </p><a href="#">了解更多</a> </dd></dl><dl><dt><a href="#"><img src="picture/new1.jpg" width="340" height="250" alt=""/></a></dt><dd><h2>XXX在中国：向我们引以为豪的伙伴致敬。</h2><p>我们努力工作，就是希望能与朋友们分享美味醇厚的咖啡。并努力让世界变得更美好一点。这就是1971我们开设第一家XXX咖啡店时的理念，如今我们依然秉承这样的理念。了解我们的故事</p><a href="#">了解更多</a> </dd></dl><div class="clear"></div></ul></div><div class="ishopCon"><div class="ishop"><div class="tit"></div><div class="shopUl"><a target="_blank" href="#">天猫旗舰店</a><a target="_blank" href="#">锁鲜专卖店</a><a target="_blank" href="#">京东商城</a><a target="_blank" href="#">一号店商城</a><a target="_blank" href="#">拍拍商城</a></div></div></div><div class="footer"><div class="main2"><div class="icontact"><span class="f2">contact</span> <span class="f3">for me</span></div><div class="tel"> online Service<div class="telNum">XXX</div><div class="box"></div><span style="text-transform:normal;">传真：XXX</span> <span style="text-transform: none;">邮箱：XXX</span></div><dl><dt><a href="#">关于我们</a></dt><dd><a href="#">企业简介</a></dd><dd><a href="#">企业文化</a></dd><dd><a href="#">企业历程</a></dd></dl><dl><dt><a href="#">品牌活动</a></dt><dd><a href="#">品牌活动推广</a></dd><dd><a href="#">品牌资讯</a></dd></dl><dl><dt><a href="#">关于我们</a></dt><dd><a href="#">企业简介</a></dd><dd><a href="#">企业文化</a></dd><dd><a href="#">企业历程</a></dd></dl><dl><dt><a href="#">品牌活动</a></dt><dd><a href="#">品牌活动推广</a></dd><dd><a href="#">品牌资讯</a></dd></dl><div class="bgEwm"><div class="topBg" style="background-image: url(images/topbg.png);"></div> <script type="text/javascript" src="js/zzsc.js"></script><div id="box"><div class="prev"></div><div class="next"></div><ul class="bigUl"><li style="z-index:1"><a href="#"><img src="picture/ewm1.jpg" alt="图1" /></a></li><li><a href="#"><img src="picture/ewm1.jpg" alt="图2" /></a></li><li><a href="#"><img src="picture/ewm2.jpg" alt="图3" /></a></li><li><a href="#"><img src="picture/ewm1.jpg" alt="图4" /></a></li></ul><ul class="numberUl"><li class="night"><a href="javascript:;">1</a></li><li><a href="javascript:;">2</a></li><li><a href="javascript:;">3</a></li><li><a href="javascript:;">4</a></li></ul><div><ul class="textUl"><li style="display:block;"><a href="#">XXX公众号</a></li><li><a href="#">XXX手机二维码</a></li><li><a href="#">XXX微商城</a></li><li><a href="#">XXX微信号</a></li></ul></div></div> </div></div></div><div class="copyRight"><div class="copyRightCon"><p>COPYRIGHT © ALL RIGHTS RESERVED</p></div></div></body></html>