时间：2023-06-05 14:00:01 | 来源：网站运营
时间：2023-06-05 14:00:01 来源：网站运营
HTML5期末大作业：生活服务网站设计——生活服务同城商城(33页)：常见网页设计作业题材有个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在线咨询
PC电脑端关注我们1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。<!DOCTYPE html><!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"><html> <head><meta charset="utf-8"><title>WangID通城——商家店铺</title><link rel="stylesheet" type="text/css" href="css/index.css"><link rel="stylesheet" type="text/css" href="css/ziy.css"><!-- <script src="js/jquery-1.11.3.min.js" ></script><script src="js/index.js" ></script> --><!-- <script type="text/javascript" src="js/jquery1.42.min.js"></script> --><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.source.js"></script></head> <body><!--侧边--><div class="jdm-toolbar-wrap J-wrap"> <div class="jdm-toolbar J-toolbar"> <div class="jdm-toolbar-panels J-panel"></div> <div class="jdm-toolbar-tabs J-tab"> <div data-type="bar" class="J-trigger jdm-toolbar-tab jdm-tbar-tab-ger"> <i class="tab-ico"></i> <em class="tab-text">购物车</em> </div> <div data-type="bar" class="J-trigger jdm-toolbar-tab jdm-tbar-tab-cart"> <i class="tab-ico"></i> <em class="tab-text">购物车</em> </div> <div data-type="bar" clstag="h|keycount|cebianlan_h_follow|btn" class="J-trigger jdm-toolbar-tab jdm-tbar-tab-follow" data-name="follow" data-login="true"> <i class="tab-ico"></i> <em class="tab-text">我的关注</em> </div> </div> <div class="J-trigger jdm-toolbar-tab jdm-tbar-tab-message" data-name="message"><a target="_blank" href="#"> <i class="tab-ico"></i> <em class="tab-text">我的消息 </em></a> </div> </div> <div class="jdm-toolbar-footer"> <div data-type="link" id="#top" class="J-trigger jdm-toolbar-tab jdm-tbar-tab-top"> <a href="#" clstag="h|keycount|cebianlan_h|top"> <i class="tab-ico"></i> <em class="tab-text">顶部</em> </a> </div> </div> <div class="jdm-toolbar-mini"></div> <div id="J-toolbar-load-hook" clstag="h|keycount|cebianlan_h|load"></div> </div> <!--头部--><div id="header"> <div class="header-box"> <h3 class="huany">WangID本地购物商城欢迎您的到来！</h3> <ul class="header-left"> <li class="bj"> <a class="dib" href="#">杭州市</a> <i class="ci-leftll"> <s class="jt">◇</s> </i> <div class="bj-1"> <h3>热门城市：</h3> <a href="">杭州</a><a href="">杭州</a><a href="">杭州</a><a href="">杭州</a><a href="">河北</a><a href="">山西</a><a href="">河南</a><a href="">辽宁</a><a href="">吉林</a><a href="">黑龙江</a><a href="">浙江</a><a href="">江苏</a><a href="">山东</a><a href="">安徽</a><a href="">内蒙古</a><a href="">湖北</a><a href="">湖南</a><a href="">广东</a><a href="">广西</a><a href="">江西</a><a href="">四川</a><a href="">海南</a><a href="">贵州</a><a href="">云南</a><a href="">西藏</a><a href="">陕西</a><a href="">甘肃</a><a href="">青海</a><a href="">宁夏</a><a href="">新疆</a><a href="">台湾</a><a href="">香港</a><a href="">澳门</a><a href="">海外</a><a href="qieh_cs.html">全部+</a> </div> </li> </ul> <ul class="header-right"> <li class="denglu">Hi~<a class="red" href="dengl.html">请登录!</a> <a href="zhuc.html">[免费注册]</a></li> <li class="shu"></li> <li class="denglu"><a class="ing_ps" href="#">我的收藏</a></li> <li class="shu"></li> <li class="denglu"><a class="ing_ps ps1" href="#">申请入驻</a></li> <li class="shu"></li> <li class="denglu"><a class="ing_ps ps2" href="#">客户服务</a></li> <li class="shu"></li> <li class="shouji bj"> <a class="ing_ps ps3" href="#">手机通城</a> <i class="ci-right "> <s class="jt">◇</s> </i> <div class="shouji1"> <img src="images/mb_wangid.png" class="shouji4"> <div class="shouji2"> <p>通城客户端</p> <p class="red">首次下单满79元，送79元</p> </div> <div class="yi"> <img src="images/mb_wangid.png" class="shouji4"> <div class="er"> <p>通城微信公众号</p> <p class="red">关注通城公众号的积分，换大礼</p> </div> </div> </div> </li> </ul> </div></div><!--搜索栏--><div class="toub_beij"> <div class="logo"><a href="./"><img src="./images/logo.png"></a></div> <div class="search"> <input type="text" value="家电一折抢" class="text" id="textt"> <button class="button">搜索</button> </div> <div class="right"> <i class="gw-left"></i> <i class="gw-right"></i> <div class="sc"> <i class="gw-count">0</i> <i class="sd"></i> </div> <a href="gouw_che.html">我的购物车</a> <div class="dorpdown-layer"> <ul> <li class="meiyou"> <img src="./images/settleup-nogoods.png"> <span>购物车中还没有商品，赶紧选购吧！</span> </li> </ul> </div> </div> <div class="hotwords"> <a class="biaoti">热门搜索：</a> <a href="#">新款连衣裙</a> <a href="#">四件套</a> <a href="#">潮流T恤</a> <a href="#">时尚女鞋</a> <a href="#">乐1</a> <a href="#">特步女鞋</a> <a href="#">威士忌</a> </div></div> <!--店铺--><div class="dianp_logo_beij"> <div class="dianp_logo_img"> <img src="images/dianp_logo_beij.jpg"> </div> <div class="beij_center dianp_xianq_fud_beij"> <div class="dianp_mingx"> <div class="dianp_minc"> <p>智汇礼品官方旗舰店</p> <div class="services-stars f_f1"> <span class="star"><i style="width:81.2819333333%">星星</i></span> <span class="score">4.0</span>分 </div> <div class="dianp_sc"> <a href="#" class="btn-collect"><i class="sprite-enter"></i>收藏店铺</a> </div> <div class="dianp_sc"> <a href="#" class="btn-collect"><i class="sprite_3"></i>联系商家</a> </div> <div class="jingr_guanw_anniu"> <a href="#">进入官网</a> </div> </div> <div class="dianp_diz"> <div class="zuo_diz"><p>地址：贵州省杭州市云岩区大亨大厦16层</p></div> <div class="zuo_diz_2"> <span>电话：0852-8667011</span> <span>联系人：潘中全</span> <span>营业时间：09:00至18:00</span> </div> </div> </div> </div></div><div class="dianp_daoh_beij"> <div class="beij_center"> <div class="dp_daoh_ul"> <ul> <li class="dp_dh_li"><a href="shagnj_dianp.html" class="lin_color">首页</a></li> <li class="dp_dh_li"> <a href="shagnj_lieb.html" class="lin_color">全部商品<i class="ci-leftll"><s class="jt">◇</s></i></a> <div class="quanb_shangp_lieb"> <dl> <dt><a href="#">工艺礼品专区</a></dt> <dd> <ul> <li><a href="#">扇子</a></li> <li><a href="#">刀剑</a></li> <li><a href="#">香炉</a></li> <li><a href="#">摆件</a></li> </ul> </dd> </dl> <dl> <dt><a href="#">美妆礼品</a></dt> <dd> <ul> <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> <li><a href="#">美妆工具</a></li> </ul> </dd> </dl> <dl> <dt><a href="#">礼品文具专区</a></dt> <dd> <ul> <li><a href="#">日记本/笔记本</a></li> <li><a href="#">同学录</a></li> <li><a href="#">文房四宝</a></li> <li><a href="#">笔类</a></li> </ul> </dd> </dl> <dl> <dt><a href="#">礼盒专区</a></dt> <dd> <ul> <li><a href="#">礼品盒</a></li> </ul> </dd> </dl> <dl> <dt><a href="#">婚庆节庆</a></dt> <dd> <ul> <li><a href="#">婚房布置</a></li> <li><a href="#">婚庆摆件</a></li> <li><a href="#">喜糖盒</a></li> <li><a href="#">手捧花</a></li> </ul> </dd> </dl> <dl> <dt><a href="#">情侣礼物专区</a></dt> <dd> <ul> <li><a href="#">送女友/送老婆</a></li> <li><a href="#">送男友/老公</a></li> <li><a href="#">情侣专区</a></li> </ul> </dd> </dl> <dl> <dt><a href="#">教师节礼物</a></dt> <dd> <ul> <li></li> </ul> </dd> </dl> </div> </li> <li class="dp_dh_li"><a href="#" class="lin_color">分销商品</a></li> <li class="dp_dh_li"><a href="#" class="lin_color">化妆镜</a></li> <li class="dp_dh_li"><a href="#" class="lin_color">摆件</a></li> <li class="dp_dh_li"><a href="#" class="lin_color">连衣裙</a></li> <li class="dp_dh_li"><a href="shagnj_dianp_jies.html" class="lin_color">店铺简介</a></li> </ul> </div> </div></div><!--简介--><div class="shangj_dianp_jiej"> <div class="jianj_img"><img src="images/shangj_jianj_beij.jpg"></div> <div class="beij_center fl_01"> <div class="jianj_text"> <div class="dianp_jianj"> <h2>店铺简介</h2> <div class="haod_kz"> <p>浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要从事保健品（海参）产品的销售。浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要从事保健品（海参）产品的销售。</p> <p>旗下的优参堂海参品牌源自于卢炜翎先生创立的优参号参堂，经过一百多年的发展，现已成为最具规模化，现代化，专业化的海参加工生产企业之一。旗下的优参堂海参品牌源自于卢炜翎先生创立的优参号参堂，经过一百多年的发展，现已成为最具规模化，现代化，专业化的海参加工生产企业之一。</p> <p>公司特与世纪联华超市股份有限公司、物美商业集团股份有限公司、天天好大药房等合作，在浙江省多个城市100多家门店进行销售。此外公司还搭档杭州电视台生活频道《生活大参考》、杭州电视台生活频道电商平台共同进行优参堂海参的销售，致力于将品牌以更多样化的形式进行推广，将产品以更方便快捷的渠道送达到消费者手中。</p> <p>公司本着“客户至上，质量为本”的原则，建立健全了严苛的质量标准检验体系，除了通过国家食品认证体系之外，还委托国家轻工业食品质量监督检测杭州站特别做了农药、兽药残留检测，海水污染检测，以远远低于国家标准的检测结果确保海参品质。</p> </div> </div> <div class="dianp_dit"> <style type="text/css"> html,body{margin:0;padding:0;} .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap} .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script> </head> <body> <!--百度地图容器--> <div class="dianp_dit" id="dituContent"></div> </body> <script type="text/javascript"> //创建和初始化地图函数： function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } //创建地图函数： function createMap(){ var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 var point = new BMap.Point(106.716053,26.591136);//定义一个中心点坐标 map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 } //地图事件设置函数： function setMapEvent(){ map.enableDragging();//启用地图拖拽事件，默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 } //地图控件添加函数： function addMapControl(){ //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); map.addControl(ctrl_sca); } //标注点数组 var markerArr = [{title:"我的标记",content:"我的备注",point:"106.716062|26.591136",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}} ]; //创建marker function addMarker(){ for(var i=0;i<markerArr.length;i++){ var json = markerArr[i]; var p0 = json.point.split("|")[0]; var p1 = json.point.split("|")[1]; var point = new BMap.Point(p0,p1); var iconImg = createIcon(json.icon); var marker = new BMap.Marker(point,{icon:iconImg}); var iw = createInfoWindow(i); var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)}); marker.setLabel(label); map.addOverlay(marker); label.setStyle({ borderColor:"#808080", color:"#333", cursor:"pointer" }); (function(){ var index = i; var _iw = createInfoWindow(i); var _marker = marker; _marker.addEventListener("click",function(){ this.openInfoWindow(_iw); }); _iw.addEventListener("open",function(){ _marker.getLabel().hide(); }) _iw.addEventListener("close",function(){ _marker.getLabel().show(); }) label.addEventListener("click",function(){ _marker.openInfoWindow(_iw); }) if(!!json.isOpen){ label.hide(); _marker.openInfoWindow(_iw); } })() } } //创建InfoWindow function createInfoWindow(i){ var json = markerArr[i]; var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>"); return iw; } //创建一个Icon function createIcon(json){ var icon = new BMap.Icon("images/t-107.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)}) return icon; } initMap();//创建和初始化地图 </script> </div> </div> </div></div><!--底部--><div class="dib_beij"> <div class="dib_jvz_beij"> <div class="shangp_baoz"> <p>本地购物 看得见的商品</p> <p class="beng1">正品行货 购物无忧</p> <p class="beng2">低价实惠 帮你省钱</p> <p class="beng3">本地直发 专业配送</p> </div> <div class="zhongj_youx"> <div class="lieb_daoh"> <h4>物流配送</h4> <ul> <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> </div> <div class="lieb_daoh"> <h4>支付与账户</h4> <ul> <li><a href="#">货到付款</a></li> <li><a href="#">在线支付</a></li> <li><a href="#">门店支付</a></li> <li><a href="zhangh_anq.html">账户安全</a></li> </ul> </div> <div class="lieb_daoh"> <h4>购物帮助</h4> <ul> <li><a href="#">购物保障</a></li> <li><a href="#">购物流程</a></li> <li><a href="#">焦点问题</a></li> <li><a href="#">联系我们</a></li> </ul> </div> <div class="lieb_daoh"> <h4>售后服务</h4> <ul> <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> </div> <div class="lieb_daoh"> <div class="kef_dianh"> <p>客服电话</p><span>400-6677-937</span> </div> <div class="kef_dianh kef_dianh_youx"> <p>意见收集邮箱</p><p>Ask@wangid.com</p> </div> </div> <div class="lieb_daoh lieb_daoh_you"> <div class="erw_ma_beij"> <div class="erw_m"> <h1><img src="images/mb_wangid.png"></h1> <span>扫码下载通城客户端</span> </div> <div class="erw_m"> <h1><img src="images/mb_wangid.png"></h1> <span>扫码下载通城客户端</span> </div> </div> </div> </div> <div class="beia_hao"> <p>京ICP备：14012449号 黔ICP证：B2-20140009号 </p> <p class="gonga_bei">京公网安备：11010602030054号</p> <div class="renz_"> <span></span> <span class="span1"></span> <span class="span2"></span> <span class="span3"></span> </div> </div> </div></div></body></html>~ 关注我，点赞博文~ 每天带你涨知识!相关问题可以相互学习，可关注↓公Z号 获取更多源码 !web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站 HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他* 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 关键词：生活,服务,商城,设计,作业
