600字范文 > html期末作业代码网页设计网站设计——橙色精美零食(3页) web前端课程设计_web前端课

html期末作业代码网页设计网站设计——橙色精美零食(3页) web前端课程设计_web前端课

时间：2021-12-14 03:55:39

HTML5期末大作业：橙色精美零食网站设计——橙色精美零食(3页)

文章目录

HTML5期末大作业：橙色精美零食网站设计——橙色精美零食(3页)一、作品展示二、文件目录三、代码实现四、获取更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>XXX</title><meta name="keywords" content="XXX,XXX官网,双十一,薯片,饼干,糕点,即食三文鱼,肉干,速溶饮品"><meta name="description" content="XXX —— 进口食品专卖"><link href="css/css.css" type="text/css" rel="stylesheet" media="screen"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><div class="header"><div class="top"><div class="top_content"><div class="logo"><a target="_blank" href=""><img src="picture/logo.png" width="100" ></a></div><div class="top_le_nav"><a href="#">首页</a><a target="_blank" href="about.html">关于我们</a><a target="_blank" href="#jyfw">经营范围</a><a target="_blank" href="activity.html" >优惠活动</a><a target="_blank" href="#join_us" >招商合作</a></div></div></div></div><div class="banner"><img src="picture/banner.png"></div><section class="sect_us"><div class="wrap index_"><article class="article"><header class="T" style="visibility: visible; "><h2>走进XXX</h2><h1>about us</h1><h4></h4></header><div class="row slideInUp " style="visibility: visible; "><div class="span-3 midd-4 smal-hide"><div class="us_img1"><a href="about.html" target="_blank"><img src="picture/us1.png"></a></div></div><div class="span-6 midd-8 smal-12"><div class="us_text">XXX是一家做进口食品专卖 ,我们产品均来自五大洲110多个国家的特色休闲食品,并严格按照国际食品安全标准，最大满足中国市场对进口食品健康要求。XXX在把握消费品市场商机的前提下，利用其强大的流通优势、资金优势、管理优势，采用先进的经营模式，以产品多样化，服务多元化，渠道多式化的全新业态，打造中国优质品牌“XXX”，致力于将全球优质食品带入中国，尽力打造国内进口食品一流品牌！<br>我们全心全意为您提供新鲜，健康，具性价比的美食，坚信美食的治愈力量。我们追求极致的用户体验，让您吃的爽是我们的职责和能力。我们陪伴在您身边，传播爱与快乐、正能量，为您创造独特的美食世界。发现生活中最单纯的幸福感~</div></div><div class="span-3 midd-hide smal-hide"><div class="us_img208"><img src="picture/us2.png"></div></div></div></article></div></section><div class="range_us" id="jyfw"><div class="wrap index_"><div class="article"><header class="T " style="visibility: visible; "><h2>经营范围</h2><h1>PRODUCTS</h1><h4></h4></header><div class="range_box"><div class="syaredbg"><div class="syawhitebg"><div class="syaleft"><div class="pic"><img class="vcenter" src="picture/syab.png" alt="有颜又好吃"></div></div><div class="syaright"><ul><li><img src="picture/img1.png" title="果脯蜜饯 " alt="果脯蜜饯 "></li><li><img src="picture/img2.png" title="肉脯肉干" alt="肉脯肉干"></li><li><img src="picture/img3.png" title="海味即食" alt="海味即食"></li><li><img src="picture/img4.png" title="饼干膨化" alt="饼干膨化"></li><li><img src="picture/img5.png" title="糕点点" alt="糕点点"></li><li><img src="picture/img6.png" title="速溶饮品" alt="速溶饮品"></li></ul></div><div class="clear"></div></div></div></div></div></div><div class="clear"></div></div><div class="activity_us"><div class="wrap index_"><div class="article"><header class="T " style="visibility: visible; "><h2>优惠活动</h2><h1>activity</h1><h4></h4></header><div class="act_box"><div class="left_act"><img src="picture/hl.png"></div><div class="center_act"><h1>团购来袭,优惠更多！</h1><div><p>两人团购，满200各减20元，</p><p>三人团购，满300各减30元，</p><p>五人以上团购，满500各减50元！</p></div></div><div class="right_act"><img src="picture/rtimgs.png"></div><div class="clear"></div></div></div></div></div><div class="join_us" id="join_us"><div class="wrap index_"><div class="article"><header class="T" style="visibility: visible; "><h2>招商合作</h2><h1>join us</h1><h4></h4></header><div class="join_box"><ul><li><div class="num">1</div><div class="join_word">通过网站或电话咨询<br />公司销售经理了解 </div></li><li><div class="num">2</div><div class="join_word">洽谈合作：可电话洽谈或<br />直接来参观考察洽谈</div></li><li><div class="num">3</div><div class="join_word">签订协议<br />确定合作方式</div></li><li class="lxfs"><h1>联系方式</h1><b>XXX</b></li></ul></div></div></div></div><div class="Purpose"><div class="container2"><div class="pur"><h3>我们的宗旨</h3><span></span><p>您不仅可以买到低价美味、来自全球各地的精选零食，根据不同时间段，我们还制做优惠活动方案。</p><p>一切都是为了让您更好地享受美食与生活，同时也向消费者传递一份健康、乐活、充满正能量的生活态度！</p></div><div class="purlist"><ul class="clearfix"><li class="clearfix"><div class="pic pull-left"><img class="vcenter" src="picture/pur1.png" alt=""></div><div class="purltxt pull-left"><span>全球精选</span><p>最实惠的购物方案</p></div></li><li class="clearfix"><div class="pic pull-left"><img class="vcenter" src="picture/pur2.png" alt=""></div><div class="purltxt pull-left"><span>仓库直发</span><p>24小时内快速发货服务</p></div></li><li class="clearfix"><div class="pic pull-left"><img class="vcenter" src="picture/pur3.png" alt=""></div><div class="purltxt pull-left"><span>源头直采</span><p>精选正宗好食品</p></div></li><li class="clearfix"><div class="pic pull-left"><img class="vcenter" src="picture/pur4.png" alt=""></div><div class="purltxt pull-left"><span>天天底价</span><p>零食到家购不停</p></div></li></ul></div></div></div><div class="footer"><p>服务热线：XXX 合作电话：XXX 传真：XXX </p><p>XXX 版权所有 -</p></div><div class="main-im"><div id="open_im" class="open-im"> </div> <div class="im_main" id="im_main"><div id="close_im" class="close-im"><a href="javascript:void(0);" title="点击关闭"> </a></div><a href="/msgrd?v=3&uin=1600571584&site=qq&menu=yes" target="_blank" class="im-qq qq-a" title="在线QQ客服"><div class="qq-container"></div><div class="qq-hover-c"><img class="img-qq" src="picture/qq.png"></div><span> QQ在线咨询</span></a><div class="im-tel"><div>服务热线</div><div class="tel-num">XXX</div></div><div class="im-footer" style="position:relative"><div class="weixing-container"><div class="weixing-show"><div class="weixing-txt">微信扫一扫<br>关注XXX<br>获取更多优惠活动</div><img class="weixing-ma" src="picture/weixing-ma.jpg"><div class="weixing-sanjiao"></div><div class="weixing-sanjiao-big"></div></div></div><div class="go-top"><a href="javascript:;" title="返回顶部"></a> </div><div style="clear:both"></div></div></div></div><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </body></html>