300字范文 > div+css静态网页设计`生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品

div+css静态网页设计`生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品

时间：2023-08-04 21:37:43

HTML5期末大作业：生活服务网站设计——生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局

文章目录

HTML5期末大作业：生活服务网站设计——生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局一、作品展示二、文件目录三、代码实现四、获取更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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 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>浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要从事保健品（海参）产品的销售。浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于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./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}}];//创建markerfunction 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);}})()}}//创建InfoWindowfunction 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;}//创建一个Iconfunction 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@</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-0009号 </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号获取更多源码

div+css静态网页设计`生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。