時(shí)間:2023-06-05 14:00:01 | 來源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-06-05 14:00:01 來源:網(wǎng)站運(yùn)營(yíng)
HTML5期末大作業(yè):生活服務(wù)網(wǎng)站設(shè)計(jì)——生活服務(wù)同城商城(33頁):常見網(wǎng)頁設(shè)計(jì)作業(yè)題材有個(gè)人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動(dòng)漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他
等網(wǎng)頁設(shè)計(jì)題目,A+水平作業(yè)
, 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計(jì)需求, 喜歡的可以下載!
PC電腦端關(guān)注我們
1.網(wǎng)頁作品簡(jiǎn)介
:HTML期末大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè) A+水平 ,喜歡的可以下載,文章頁支持手機(jī)PC響應(yīng)式布局。2.網(wǎng)頁作品編輯
:作品下載后可使用任意HTML編輯軟件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++
等任意HTML軟件編輯修改網(wǎng)頁)。3.網(wǎng)頁作品技術(shù)
:Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、banner、表單、二級(jí)三級(jí)頁面等,視頻、 音頻元素 、Flash,同時(shí)設(shè)計(jì)了logo(源文件),基本期末作業(yè)所需的知識(shí)點(diǎn)全覆蓋。<!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><!--側(cè)邊--><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">我的關(guān)注</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="">內(nèi)蒙古</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="">臺(tái)灣</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">請(qǐng)登錄!</a> <a href="zhuc.html">[免費(fèi)注冊(cè)]</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="#">申請(qǐng)入駐</a></li> <li class="shu"></li> <li class="denglu"><a class="ing_ps ps2" href="#">客戶服務(wù)</a></li> <li class="shu"></li> <li class="shouji bj"> <a class="ing_ps ps3" href="#">手機(jī)通城</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>通城微信公眾號(hào)</p> <p class="red">關(guān)注通城公眾號(hào)的積分,換大禮</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="#">時(shí)尚女鞋</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>聯(lián)系商家</a> </div> <div class="jingr_guanw_anniu"> <a href="#">進(jìn)入官網(wǎng)</a> </div> </div> <div class="dianp_diz"> <div class="zuo_diz"><p>地址:貴州省杭州市云巖區(qū)大亨大廈16層</p></div> <div class="zuo_diz_2"> <span>電話:0852-8667011</span> <span>聯(lián)系人:潘中全</span> <span>營(yíng)業(yè)時(shí)間: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="#">工藝禮品專區(qū)</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="#">禮品文具專區(qū)</a></dt> <dd> <ul> <li><a href="#">日記本/筆記本</a></li> <li><a href="#">同學(xué)錄</a></li> <li><a href="#">文房四寶</a></li> <li><a href="#">筆類</a></li> </ul> </dd> </dl> <dl> <dt><a href="#">禮盒專區(qū)</a></dt> <dd> <ul> <li><a href="#">禮品盒</a></li> </ul> </dd> </dl> <dl> <dt><a href="#">婚慶節(jié)慶</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="#">情侶禮物專區(qū)</a></dt> <dd> <ul> <li><a href="#">送女友/送老婆</a></li> <li><a href="#">送男友/老公</a></li> <li><a href="#">情侶專區(qū)</a></li> </ul> </dd> </dl> <dl> <dt><a href="#">教師節(jié)禮物</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">店鋪簡(jiǎn)介</a></li> </ul> </div> </div></div><!--簡(jiǎn)介--><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>店鋪簡(jiǎn)介</h2> <div class="haod_kz"> <p>浙江百慕生物科技有限公司隸屬浙江麗珀集團(tuán),成立于2011年3月,注冊(cè)資本1000萬元,是一家從事海洋生物開發(fā)銷售的公司,主要從事保健品(海參)產(chǎn)品的銷售。浙江百慕生物科技有限公司隸屬浙江麗珀集團(tuán),成立于2011年3月,注冊(cè)資本1000萬元,是一家從事海洋生物開發(fā)銷售的公司,主要從事保健品(海參)產(chǎn)品的銷售。</p> <p>旗下的優(yōu)參堂海參品牌源自于盧煒翎先生創(chuàng)立的優(yōu)參號(hào)參堂,經(jīng)過一百多年的發(fā)展,現(xiàn)已成為最具規(guī)?;?,現(xiàn)代化,專業(yè)化的海參加工生產(chǎn)企業(yè)之一。旗下的優(yōu)參堂海參品牌源自于盧煒翎先生創(chuàng)立的優(yōu)參號(hào)參堂,經(jīng)過一百多年的發(fā)展,現(xiàn)已成為最具規(guī)?;?,現(xiàn)代化,專業(yè)化的海參加工生產(chǎn)企業(yè)之一。</p> <p>公司特與世紀(jì)聯(lián)華超市股份有限公司、物美商業(yè)集團(tuán)股份有限公司、天天好大藥房等合作,在浙江省多個(gè)城市100多家門店進(jìn)行銷售。此外公司還搭檔杭州電視臺(tái)生活頻道《生活大參考》、杭州電視臺(tái)生活頻道電商平臺(tái)共同進(jìn)行優(yōu)參堂海參的銷售,致力于將品牌以更多樣化的形式進(jìn)行推廣,將產(chǎn)品以更方便快捷的渠道送達(dá)到消費(fèi)者手中。</p> <p>公司本著“客戶至上,質(zhì)量為本”的原則,建立健全了嚴(yán)苛的質(zhì)量標(biāo)準(zhǔn)檢驗(yàn)體系,除了通過國(guó)家食品認(rèn)證體系之外,還委托國(guó)家輕工業(yè)食品質(zhì)量監(jiān)督檢測(cè)杭州站特別做了農(nóng)藥、獸藥殘留檢測(cè),海水污染檢測(cè),以遠(yuǎn)遠(yuǎn)低于國(guó)家標(biāo)準(zhǔn)的檢測(cè)結(jié)果確保海參品質(zhì)。</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"> //創(chuàng)建和初始化地圖函數(shù): function initMap(){ createMap();//創(chuàng)建地圖 setMapEvent();//設(shè)置地圖事件 addMapControl();//向地圖添加控件 addMarker();//向地圖中添加marker } //創(chuàng)建地圖函數(shù): function createMap(){ var map = new BMap.Map("dituContent");//在百度地圖容器中創(chuàng)建一個(gè)地圖 var point = new BMap.Point(106.716053,26.591136);//定義一個(gè)中心點(diǎn)坐標(biāo) map.centerAndZoom(point,17);//設(shè)定地圖的中心點(diǎn)和坐標(biāo)并將地圖顯示在地圖容器中 window.map = map;//將map變量存儲(chǔ)在全局 } //地圖事件設(shè)置函數(shù): function setMapEvent(){ map.enableDragging();//啟用地圖拖拽事件,默認(rèn)啟用(可不寫) map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小 map.enableDoubleClickZoom();//啟用鼠標(biāo)雙擊放大,默認(rèn)啟用(可不寫) map.enableKeyboard();//啟用鍵盤上下左右鍵移動(dòng)地圖 } //地圖控件添加函數(shù): 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); } //標(biāo)注點(diǎn)數(shù)組 var markerArr = [{title:"我的標(biāo)記",content:"我的備注",point:"106.716062|26.591136",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}} ]; //創(chuàng)建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); } })() } } //創(chuàng)建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; } //創(chuàng)建一個(gè)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();//創(chuàng)建和初始化地圖 </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">低價(jià)實(shí)惠 幫你省錢</p> <p class="beng3">本地直發(fā) 專業(yè)配送</p> </div> <div class="zhongj_youx"> <div class="lieb_daoh"> <h4>物流配送</h4> <ul> <li><a href="#">配送查詢</a></li> <li><a href="#">配送服務(wù)</a></li> <li><a href="#">配送費(fèi)用</a></li> <li><a href="#">配送時(shí)效</a></li> <li><a href="#">簽收與驗(yàn)貨</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="#">焦點(diǎn)問題</a></li> <li><a href="#">聯(lián)系我們</a></li> </ul> </div> <div class="lieb_daoh"> <h4>售后服務(wù)</h4> <ul> <li><a href="#">退換貨服務(wù)</a></li> <li><a href="#">退款說明</a></li> <li><a href="#">專業(yè)維修</a></li> <li><a href="#">延保服務(wù)</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號(hào) 黔ICP證:B2-20140009號(hào) </p> <p class="gonga_bei">京公網(wǎng)安備:11010602030054號(hào)</p> <div class="renz_"> <span></span> <span class="span1"></span> <span class="span2"></span> <span class="span3"></span> </div> </div> </div></div></body></html>
~ 關(guān)注我,點(diǎn)贊博文~ 每天帶你漲知識(shí)!
相關(guān)問題可以相互學(xué)習(xí),可關(guān)注↓公Z號(hào) 獲取更多源碼 !
web前端 零基礎(chǔ)-入門到高級(jí) (視頻+源碼+開發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程)
適合入門到高級(jí)的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站
HTML5期末考核大作業(yè)源碼
包含 個(gè)人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動(dòng)漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他
* 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計(jì)需求, 喜歡的可以下載! 關(guān)鍵詞:生活,服務(wù),商城,設(shè)計(jì),作業(yè)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。