基于HTML(品優(yōu)購(gòu))電商項(xiàng)目項(xiàng)目的設(shè)計(jì)與實(shí)現(xiàn)（html前端源碼和論文設(shè)計(jì)）

時(shí)間：2022-08-02 22:15:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-02 22:15:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

?XXXX職業(yè)學(xué)院

畢 業(yè) 論 文

題 目： 基于HTML品優(yōu)購(gòu)項(xiàng)目的設(shè)計(jì)與實(shí)現(xiàn)
所屬系部： 信息工程學(xué)院
專業(yè)班級(jí)：
學(xué)生姓名：
指導(dǎo)教師：

2020 年 11 月 29 日 摘 要 品優(yōu)購(gòu)網(wǎng)上商城是一個(gè)綜合性的 B2B2C 平臺(tái)，類似京東商城、天貓商城。網(wǎng)站采用商家入駐的模式，商家入駐平臺(tái)提交申請(qǐng)，有平臺(tái)進(jìn)行資質(zhì)審核，審核通過(guò)后，商家擁有獨(dú)立的管理后臺(tái)錄入商品信息。商品經(jīng)過(guò)平臺(tái)審核后即可發(fā)布。 品優(yōu)購(gòu)網(wǎng)上商城主要分為網(wǎng)站前臺(tái)、運(yùn)營(yíng)商后臺(tái)、商家管理后臺(tái)三個(gè)子系統(tǒng) 網(wǎng)站前臺(tái)：主要包括網(wǎng)站首頁(yè)、商家首頁(yè)、商品詳細(xì)頁(yè)、搜索頁(yè)、會(huì)員中心、訂單與支付相關(guān)頁(yè)面、秒殺頻道等 運(yùn)營(yíng)商后臺(tái)：是運(yùn)營(yíng)商的運(yùn)營(yíng)人員的管理后臺(tái)。 主要包括商家審核、品牌管理、規(guī)格管理、模板管理、商品分類管理、商品審核、廣告類型管理、廣告管理、訂單查詢、商家結(jié)算等。 商家管理后臺(tái)：入駐的商家進(jìn)行管理的后臺(tái)，主要功能是對(duì)商品的管理以及訂單查詢統(tǒng)計(jì)、資金結(jié)算等功能。

關(guān)鍵詞：HTML5；CSS3；iconfont

目 錄 摘要·······································································Ⅰ 1 緒論····································································3 1.1 項(xiàng)目開(kāi)發(fā)背景·····················································3 1.2 開(kāi)發(fā)的研究目的和意義············································4 1.2.1 開(kāi)發(fā)的研究目的············································4 1.2.2 開(kāi)發(fā)的研究意義············································4 2 項(xiàng)目介紹·······························································5 2.1 web前端開(kāi)發(fā)······················································1 2.1.1 web前端開(kāi)發(fā)簡(jiǎn)介···········································1 2.1.2 項(xiàng)目介紹····················································1 2.1.3 項(xiàng)目特點(diǎn)····················································1 3 項(xiàng)目開(kāi)始································································2 3.1 頁(yè)面分析···························································2 3.1.1 公共樣式分析···············································2 3.1.2 首頁(yè)分析····················································3 3.2 字體引入···························································2 3.2.1 iconfont字體下載··········································2 3.3 頁(yè)面制作···························································2 3.3.1 首頁(yè)·························································2 3.3.2 列表頁(yè)······················································3 3.3.3 商品詳情頁(yè)··················································3 3.3.4 購(gòu)物車頁(yè)面··················································3 結(jié) 論··································································3 參考文獻(xiàn)··································································4

1 緒論 1.1 項(xiàng)目開(kāi)發(fā)背景 隨著一、二線城市消費(fèi)能力日趨飽和，三到六線城市，鄉(xiāng)、縣及農(nóng)村市場(chǎng)成為電商爭(zhēng)奪的新焦點(diǎn)。目前中國(guó)鄉(xiāng)村人口超過(guò)六億，過(guò)去傳統(tǒng)商業(yè)對(duì)這些地區(qū)的滲透還不足，消費(fèi)潛力還沒(méi)有被充分挖掘，隨著互聯(lián)網(wǎng)普及率的提高，特別是移動(dòng)互聯(lián)網(wǎng)的普及，這些地區(qū)的消費(fèi)潛力將被逐漸釋放。農(nóng)村地區(qū)除了有旺盛的購(gòu)物需求外，還有大量的外銷需求，在這方面，互聯(lián)網(wǎng)的信息傳遞優(yōu)勢(shì)得以充分體現(xiàn)，基于為農(nóng)村生產(chǎn)者和消費(fèi)者服務(wù)的農(nóng)村電商成為新的增長(zhǎng)點(diǎn)，因?yàn)榈赜?、收入、消費(fèi)習(xí)慣、生產(chǎn)商品的不同，農(nóng)村市場(chǎng)表現(xiàn)出和城市市場(chǎng)截然不同的需求，這方面，電商企業(yè)還需要積極適應(yīng)，為農(nóng)村消費(fèi)者提供適應(yīng)當(dāng)?shù)鼐唧w情況的服務(wù)。 商B2B平臺(tái)在優(yōu)化整個(gè)產(chǎn)業(yè)鏈的上下游、建立以區(qū)域特色為主的電商產(chǎn)業(yè)帶中發(fā)揮著重要的作用。首先，電商B2B平臺(tái)能夠幫助產(chǎn)業(yè)帶的客戶減少購(gòu)買程序，優(yōu)化采購(gòu)渠道，降低采購(gòu)直接成本，其次，平臺(tái)能夠運(yùn)用本身優(yōu)勢(shì)資源，為賣方做好網(wǎng)絡(luò)營(yíng)銷，拓寬銷路。同時(shí)，由于電商產(chǎn)業(yè)帶一般都與當(dāng)?shù)卣归_(kāi)多方合作，電商產(chǎn)業(yè)帶的模式對(duì)于孵化具有地方特色的電子商務(wù)生態(tài)圈也是積極的探索。，在國(guó)家政策的引導(dǎo)之下，全國(guó)各地都在圍繞重點(diǎn)行業(yè)、重點(diǎn)區(qū)域，深化電子商務(wù)的拓展和應(yīng)用，更好的發(fā)揮區(qū)域電商的積聚和輻射效應(yīng)。各區(qū)域未來(lái)將依托區(qū)域產(chǎn)業(yè)集群優(yōu)勢(shì)，加強(qiáng)區(qū)域內(nèi)產(chǎn)業(yè)資源、企業(yè)資源的集聚，同時(shí)帶動(dòng)電商企業(yè)和電商相關(guān)配套企業(yè)入住，以區(qū)域特色為主的電商產(chǎn)業(yè)帶的發(fā)展將帶動(dòng)周邊地區(qū)發(fā)展特色電子商務(wù)，提升區(qū)域整體的電子商務(wù)水平，更好的促進(jìn)區(qū)域經(jīng)濟(jì)的發(fā)展。 近年來(lái)，移動(dòng)互聯(lián)網(wǎng)保持高速發(fā)展態(tài)勢(shì)，并加速向經(jīng)濟(jì)社會(huì)各領(lǐng)域滲透，帶動(dòng)電子商務(wù)由傳統(tǒng)PC端加速向移動(dòng)端遷移，移動(dòng)電子商務(wù)正成為當(dāng)前電子商務(wù)發(fā)展的新力量，同時(shí)也開(kāi)啟了電子商務(wù)發(fā)展的新空間。相較于PC端，移動(dòng)購(gòu)物受時(shí)間、空間限制更小，與線下消費(fèi)場(chǎng)景的交互方式更具情景化，未來(lái)移動(dòng)端市場(chǎng)潛力無(wú)限，移動(dòng)互聯(lián)網(wǎng)加速滲透帶動(dòng)各領(lǐng)域O2O應(yīng)用競(jìng)相發(fā)展。 跨境電商預(yù)計(jì)將為在線總消費(fèi)量貢獻(xiàn)更高的份額，預(yù)計(jì)將實(shí)現(xiàn)30%的復(fù)合年增長(zhǎng)率，有望在2020年達(dá)到1萬(wàn)億總量。其中，食品和母嬰用品將引領(lǐng)增長(zhǎng)，到2020年的復(fù)合增長(zhǎng)率將超過(guò)30%。鑒于中國(guó)特殊的消費(fèi)環(huán)境，使得那些強(qiáng)調(diào)安全性的品類，如食品和母嬰用品，以及國(guó)內(nèi)外價(jià)差較大的品類，如服裝和消費(fèi)電子的商品成為在線跨境購(gòu)買的主力。但跨境電商的崛起也是雙刃劍，隨著中國(guó)的網(wǎng)購(gòu)人群越來(lái)越懂得貨比三家，如何制定全球的價(jià)格體系對(duì)于國(guó)際品牌將是一個(gè)挑戰(zhàn)。 1.2 論文的研究目的和意義 1.2.1 開(kāi)發(fā)的研究目的 節(jié)約購(gòu)物時(shí)間、免除購(gòu)物疲勞。在網(wǎng)絡(luò)上查找你想要的東西，在商城中稍加搜索就能直接找到，不用到大街去東奔西走，大包鄰小包，累得鞋子都不想穿的回來(lái)。從累斷雙腿的逛街發(fā)展到鼠標(biāo)操控的網(wǎng)絡(luò)購(gòu)物，免除了舟車勞頓的痛苦，而且只要你有確定的購(gòu)買目標(biāo)，真是省時(shí)又省力啊。 節(jié)省購(gòu)物成本。由于網(wǎng)上店鋪簡(jiǎn)化了由生產(chǎn)商至零售商的中間環(huán)節(jié)，節(jié)省了實(shí)體銷售場(chǎng)所需要支付的租金、人工成本、工商水電費(fèi)、庫(kù)存費(fèi)及其他雜費(fèi)，因而使得銷售商品的附加費(fèi)用很少甚至沒(méi)有，價(jià)位一般都不同程度地低于市場(chǎng)零售價(jià)。 尤其像淘寶這樣的購(gòu)物網(wǎng)站，目前個(gè)人在它的網(wǎng)站上開(kāi)店是免費(fèi)的（商城的大賣家自愿選擇繳納增值服務(wù)費(fèi)），而易趣要收取一定的開(kāi)店費(fèi)用，這樣在網(wǎng)絡(luò)上開(kāi)店的人買的物品就自然的相對(duì)于現(xiàn)實(shí)購(gòu)物要便宜的多了。 相對(duì)安全?？傮w上網(wǎng)上購(gòu)物的支付系統(tǒng)還是很安全的，現(xiàn)在的網(wǎng)上銀行比以前要復(fù)雜了點(diǎn)，程序的增加就是安全力的增加，更何況一大堆如支付寶的第三方交易平臺(tái)，大大保證了你付出的錢絕對(duì)有跡可循，即使你購(gòu)買的產(chǎn)品不滿意要退貨，你的錢也照樣能夠回到我們的腰包里。 商品種類齊全。有時(shí)候想買件東西，在各大商城里找了半天，幾乎快要累死了也沒(méi)有找到，或者需要東奔西跑，挑挑揀揀地比較，可是網(wǎng)上商城就用一個(gè)頁(yè)面直觀清晰地描述出這種產(chǎn)品的基本參數(shù)和數(shù)據(jù)。 讓你清晰地了解它的特性，并且網(wǎng)上商城里包括了幾乎所有你能想到的東西，甚至零售業(yè)也在網(wǎng)上異軍突起迅猛地發(fā)展，興許你本無(wú)意的卻找到了一件自己中意很久的東西。 商品比較更直觀，免得發(fā)生爭(zhēng)執(zhí) 有道是“貨比三家，擇優(yōu)選購(gòu)”，我們?cè)诰W(wǎng)上購(gòu)物可以同時(shí)打開(kāi)多個(gè)頁(yè)面，瀏覽多個(gè)店鋪中同一件商品的價(jià)格、功能介紹及配送方式等進(jìn)行多方面比較。不容易導(dǎo)致雙方不合而發(fā)生爭(zhēng)執(zhí)。 便捷贈(zèng)送方式，付款方便 通過(guò)電子商務(wù)網(wǎng)站提供的一站式服務(wù)直接送到對(duì)方手上，十分方便，付款，直接轉(zhuǎn)帳，一步到位。 訂單不受時(shí)間的限制。你想什么時(shí)候買就什么時(shí)候買，總的來(lái)說(shuō)網(wǎng)上購(gòu)物的優(yōu)點(diǎn)還是很多的，比較懶惰或者說(shuō)不喜歡現(xiàn)實(shí)中討價(jià)還價(jià)的朋友可以試試網(wǎng)上購(gòu)物哦！上面的東西還是很便宜的，而且大一點(diǎn)的BTC網(wǎng)購(gòu)商城上都是正品行貨。 第一時(shí)間購(gòu)買，服務(wù)范圍更廣 網(wǎng)絡(luò)的速度之快，商品只要在他們的網(wǎng)店刊登代售貨品，幾千里外的人打開(kāi)網(wǎng)絡(luò)馬上就可以看到，效率快，地域差距少，可以買到很遠(yuǎn)距離的物品，網(wǎng)友不論身在何處，都可以購(gòu)買到來(lái)自各地的商品。 商品查找更容易。在現(xiàn)實(shí)的商場(chǎng)中大都將不同類別的商品分置于不同樓層銷售，若商場(chǎng)面積較大，逛完一圈往往得半天時(shí)間。而我們?cè)诰W(wǎng)上店鋪中可以直接搜索所需的商品名稱，也可以根據(jù)導(dǎo)航欄中的商品分類選購(gòu)商品，節(jié)省了尋找時(shí)間。 購(gòu)物環(huán)境很“安靜” 一邊聽(tīng)著音樂(lè)哼著小曲，完全不用理會(huì)別人的感受，而且沒(méi)有別人打擾，想怎么看怎么挑怎么買都可以。 1.2.2 開(kāi)發(fā)的研究意義 中國(guó)電子商務(wù)百位首席執(zhí)行官調(diào)查報(bào)告中將網(wǎng)絡(luò)購(gòu)物定義為“是指消費(fèi)者通過(guò)購(gòu)物網(wǎng)站獲取商品信息,在發(fā)生購(gòu)買意向后通過(guò)電子訂購(gòu)單發(fā)出購(gòu)物請(qǐng)求,然后填寫詳細(xì)地址與聯(lián)系方式,通過(guò)貨到付款、第三方支付等形式支付當(dāng)前消費(fèi)額,之后廠商以快遞形式發(fā)貨至消費(fèi)者的交易過(guò)程。” 簡(jiǎn)單而言，網(wǎng)絡(luò)購(gòu)物就是使用網(wǎng)絡(luò)在購(gòu)物交易平臺(tái)上購(gòu)買商品,是現(xiàn)下最流行的消費(fèi)方式。買家在購(gòu)物平臺(tái)上直接搜索自己想要購(gòu)買的商品，選中商品后并提交購(gòu)物訂單，填上自己的相關(guān)信息，如姓名、電話、收貨地址等。經(jīng)營(yíng)者就會(huì)通過(guò)快遞公司運(yùn)輸送貨。消費(fèi)者采用網(wǎng)銀付款方式。 目前，我國(guó)網(wǎng)絡(luò)購(gòu)物發(fā)展迅速，2015年淘寶發(fā)行的天貓雙十一活動(dòng)，僅僅一天的時(shí)間交易額達(dá)到了912.17億元，參與交易國(guó)家和地區(qū)達(dá)到232個(gè)。我們可以很清楚的看到網(wǎng)絡(luò)購(gòu)物的快速發(fā)展,它以自身的優(yōu)越特殊性,在市場(chǎng)站穩(wěn)腳步,并呈上升的狀態(tài)。 網(wǎng)絡(luò)購(gòu)物具有虛擬性。購(gòu)買商品時(shí)，買家不能直接光顧賣家的店鋪實(shí)體店，不能通過(guò)當(dāng)面的交流來(lái)詢問(wèn)商品細(xì)節(jié)，不能親眼看到所要購(gòu)買的物品的真實(shí)情況。要選購(gòu)所需產(chǎn)品時(shí)消費(fèi)者只能向店家詢問(wèn)商品的詳細(xì)情況。但在網(wǎng)絡(luò)交易中，從咨詢經(jīng)營(yíng)者問(wèn)題，到提交訂單，再到最后的收到商品，這段過(guò)程中消費(fèi)者與經(jīng)營(yíng)者不會(huì)有任何的直接接觸，消費(fèi)者只是通過(guò)網(wǎng)絡(luò)交易平臺(tái)發(fā)行的聊天軟件進(jìn)行文字交流，消費(fèi)者想要詳細(xì)認(rèn)識(shí)產(chǎn)品也只能根據(jù)網(wǎng)店商家傳的網(wǎng)頁(yè)宣傳、信譽(yù)評(píng)價(jià)等內(nèi)容來(lái)了解。這些與傳統(tǒng)交易方式有著顯著不同。 網(wǎng)絡(luò)購(gòu)物價(jià)格低廉。網(wǎng)絡(luò)店鋪經(jīng)營(yíng)與傳統(tǒng)店鋪經(jīng)營(yíng)有著完全不同的經(jīng)營(yíng)形式,虛擬化、技術(shù)性是網(wǎng)絡(luò)店鋪獨(dú)有的特殊性。網(wǎng)絡(luò)開(kāi)店成本很低，與傳統(tǒng)店鋪不同，網(wǎng)絡(luò)店鋪不用租用店鋪，不需要繳納電費(fèi)。店鋪經(jīng)營(yíng)者只需要在批發(fā)地就可以直接發(fā)貨，把商品送到消費(fèi)者手中，節(jié)省了運(yùn)輸費(fèi)，經(jīng)手的人少了，商品價(jià)格自然就低了。 網(wǎng)絡(luò)購(gòu)物不受時(shí)間拘束。網(wǎng)絡(luò)店鋪可以提供24小時(shí)服務(wù)，只要選中要買的商品，任何時(shí)間都可以下單購(gòu)買。網(wǎng)絡(luò)店鋪也不受空間的限制，只要能上網(wǎng)，提交訂單付款后就由快遞公司送貨上門，消費(fèi)者在家就可以買到自己需要的商品。 2 項(xiàng)目介紹 2.1 web前端開(kāi)發(fā) 2.1.1 web前端開(kāi)發(fā)簡(jiǎn)介 2005年以后，互聯(lián)網(wǎng)進(jìn)入Web 2.0時(shí)代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)不再只是承載單一的文字和圖片，各種豐富媒體讓網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)，網(wǎng)頁(yè)上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。 隨著Web 2.0概念的普及和W3C組織的推廣，網(wǎng)站重構(gòu)的影響力正以驚人的速度增長(zhǎng)。XHTML+CSS布局、DHTML和Ajax像一陣旋風(fēng)，鋪天蓋地席卷而來(lái)，包括百度、騰訊、淘寶、新浪、搜狐、網(wǎng)易等在內(nèi)的各種規(guī)模的IT企業(yè)都對(duì)自己的網(wǎng)站進(jìn)行了重構(gòu)。 前端開(kāi)發(fā)的入門門檻其實(shí)相對(duì)較低，與服務(wù)器端語(yǔ)言先慢后快的學(xué)習(xí)曲線相比，前端開(kāi)發(fā)的學(xué)習(xí)曲線是先快后慢。所以，對(duì)于從事IT工作的人來(lái)說(shuō)，前端開(kāi)發(fā)是個(gè)不錯(cuò)的切入點(diǎn)。 也正因?yàn)槿绱?，前端開(kāi)發(fā)領(lǐng)域有很多自學(xué)的同行，但是后面的學(xué)習(xí)曲線越來(lái)越陡峭，每前進(jìn)一步都很難。另一方面，正如前面所說(shuō)，前端開(kāi)發(fā)是個(gè)非常新的職業(yè)，對(duì)一些規(guī)范和最佳實(shí)踐的研究都處于探索階段。總有新的靈感和技術(shù)不時(shí)閃現(xiàn)出來(lái)，例如HTML5、CSS3、JavaScript、負(fù)邊距布局、柵格布局等；各種JavaScript框架層出不窮，為整個(gè)前端開(kāi)發(fā)領(lǐng)域注入了巨大的活力；瀏覽器大戰(zhàn)也越來(lái)越白熱化，跨瀏覽器兼容方案依然是五花八門。為了滿足“高可維護(hù)性”的需要，需要更深入、更系統(tǒng)地去掌握前端知識(shí)，這樣才可能創(chuàng)建一個(gè)好的前端架構(gòu)，保證代碼的質(zhì)量。 2.1.2 項(xiàng)目介紹 品優(yōu)購(gòu)網(wǎng)上商城是一個(gè)綜合性的 B2B2C 平臺(tái)，類似京東商城、天貓商城。網(wǎng)站采用商家入駐的模式，商家入駐平臺(tái)提交申請(qǐng)，有平臺(tái)進(jìn)行資質(zhì)審核，審核通過(guò)后，商家擁有獨(dú)立的管理后臺(tái)錄入商品信息。商品經(jīng)過(guò)平臺(tái)審核后即可發(fā)布。 品優(yōu)購(gòu)網(wǎng)上商城主要分為網(wǎng)站前臺(tái)、運(yùn)營(yíng)商后臺(tái)、商家管理后臺(tái)三個(gè)子系統(tǒng) 網(wǎng)站前臺(tái)：主要包括網(wǎng)站首頁(yè)、商家首頁(yè)、商品詳細(xì)頁(yè)、搜索頁(yè)、會(huì)員中心、訂單與支付相關(guān)頁(yè)面、秒殺頻道等 運(yùn)營(yíng)商后臺(tái)：是運(yùn)營(yíng)商的運(yùn)營(yíng)人員的管理后臺(tái)。 主要包括商家審核、品牌管理、規(guī)格管理、模板管理、商品分類管理、商品審核、廣告類型管理、廣告管理、訂單查詢、商家結(jié)算等。 商家管理后臺(tái)：入駐的商家進(jìn)行管理的后臺(tái)，主要功能是對(duì)商品的管理以及訂單查詢統(tǒng)計(jì)、資金結(jié)算等功能。 2.1.3 項(xiàng)目特點(diǎn) 一、傳統(tǒng)企業(yè)項(xiàng)目特點(diǎn)：用戶量固定、數(shù)據(jù)量有限、并發(fā)量不高。比如OA辦公軟件還有一些內(nèi)部人員使用的軟件這些都可認(rèn)為是傳統(tǒng)企業(yè)項(xiàng)目。 二、互聯(lián)網(wǎng)企業(yè)項(xiàng)目特點(diǎn)：用戶不限、用戶角色不限。比如，電商便是互聯(lián)網(wǎng)行業(yè)中的一個(gè)體現(xiàn)。 互聯(lián)網(wǎng)：互聯(lián)網(wǎng)又稱“國(guó)際網(wǎng)絡(luò)”，這些網(wǎng)絡(luò)按照通用的協(xié)議相互連接、資源共享，就好比一張蜘蛛網(wǎng)將彼此相互關(guān)聯(lián)只不過(guò)這張網(wǎng)是個(gè)圓形。而之后所提出的“互聯(lián)網(wǎng)+”的概念便是在此基礎(chǔ)上不斷的加入這張網(wǎng)絡(luò)。比如：互聯(lián)網(wǎng)金融、醫(yī)療等。 電商：電商的這種模式只是互聯(lián)網(wǎng)中的一種，但電商的概念卻不僅如此。電商又稱“互聯(lián)網(wǎng)電子商務(wù)”，所以凡是經(jīng)由網(wǎng)絡(luò)構(gòu)成銷售和傳播的我都將其稱之為電商。 根據(jù)互聯(lián)網(wǎng)項(xiàng)目的特點(diǎn)，所以互聯(lián)網(wǎng)項(xiàng)目主要需要解決的問(wèn)題是：高并發(fā)、大數(shù)據(jù)量、高可用。 三、電商行業(yè)的技術(shù)特點(diǎn)：技術(shù)新、范圍廣、分布式、高并發(fā)、集群、負(fù)載均衡、高可用、海量數(shù)據(jù)、業(yè)務(wù)復(fù)雜、系統(tǒng)安全等。 3 項(xiàng)目開(kāi)始 3.1 頁(yè)面分析 3.1.1 公共樣式分析 首先我們需要一個(gè)初始化的css文件。再由頁(yè)面的頂部導(dǎo)航欄，頭部和底部為公共內(nèi)容，我們需要把頂部導(dǎo)航欄，頭部和底部的css寫成公共的css文件，方便后期的引入。然后單獨(dú)寫中間內(nèi)容部分。 公共樣式頭部采用了頂部導(dǎo)航欄nav，使用列表浮動(dòng)的效果實(shí)現(xiàn)。

底部也是使用了列表和浮動(dòng)完成，其中幫助部門，采用了自定義列表。

整體的公共樣式圖，如下。

3.1.2 首頁(yè)分析 除去頂部導(dǎo)航欄，頭部和底部?jī)?nèi)容為公共樣式。則其他內(nèi)容為當(dāng)前頁(yè)面的獨(dú)有內(nèi)容。

使用浮動(dòng)效果，使商品分類，靜態(tài)輪播圖和商品快報(bào)三個(gè)板塊進(jìn)行布局。商品分類為無(wú)序列表，更改背景顏色，字體顏色，和鼠標(biāo)懸停狀態(tài)。 內(nèi)容導(dǎo)航欄為無(wú)序列表浮動(dòng)，給li設(shè)置寬度，行高，并居中，和鼠標(biāo)懸停狀態(tài)。中間部分為輪播圖，圖片頂滿。 右側(cè)分為兩塊，第一行內(nèi)容為標(biāo)題，右側(cè)更多設(shè)為浮動(dòng)，設(shè)行高?？靾?bào)內(nèi)容仍然是無(wú)序列表，使用css3讓溢出內(nèi)容隱藏并顯示…。下面為浮動(dòng)的列表項(xiàng)，里面內(nèi)容為字體圖標(biāo)，設(shè)置大小的。 下面的電器列表，仍然是采用列表項(xiàng)和浮動(dòng)完成。 3.2 字體引入 3.2.1 iconfont字體下載 網(wǎng)址：https://www.iconfont.cn/。

在主頁(yè)中間部分的搜索框輸入關(guān)鍵字，進(jìn)行搜索自己想要的圖標(biāo)。

然后把鼠標(biāo)懸停在你想要的圖標(biāo)上，點(diǎn)擊添加入庫(kù)，可選擇多個(gè)，一起加庫(kù)。

加入的圖標(biāo)會(huì)在頭部的購(gòu)物車圖標(biāo)上顯示你加入圖標(biāo)庫(kù)的數(shù)量。選好之后點(diǎn)擊購(gòu)物車。

會(huì)出現(xiàn)上面有你選入的圖標(biāo)列表，進(jìn)行瀏覽選擇（截圖忽略）。在下面會(huì)有三個(gè)選擇項(xiàng)，這里我們選擇添加至項(xiàng)目。

選擇你的項(xiàng)目，然后點(diǎn)擊確定。

跳轉(zhuǎn)頁(yè)面至你的你的項(xiàng)目圖標(biāo)，會(huì)顯示你這個(gè)項(xiàng)目里你所添加的所有圖標(biāo)。

在上面信息一覽，有查看在線鏈接。這里為了性能問(wèn)題，我們進(jìn)行下載至本地，不用再來(lái)回網(wǎng)絡(luò)請(qǐng)求。隨后把下載好的文件，放到你的項(xiàng)目根目錄即可。 在這里fonts代表你的圖標(biāo)文件夾 在你的index.html文件里，在head標(biāo)簽里用link標(biāo)簽引入圖標(biāo)文件里面的兩個(gè)css文件，隨后在圖標(biāo)文件夾里的demo—index.html運(yùn)行這個(gè)頁(yè)面，會(huì)看到自己下載的圖標(biāo)信息。 在這里我們可以在代碼里面這樣引入，復(fù)制圖標(biāo)下面的代碼

我們使用i標(biāo)簽，或者其他標(biāo)簽。聲明一個(gè)類，用來(lái)建立和引入的css文件進(jìn)行連接。然后把圖標(biāo)的代碼復(fù)制到標(biāo)簽里。 運(yùn)行效果顯示。

3.3 頁(yè)面制作 3.3.1 首頁(yè) 引入公共樣式效果圖如下。

接著為左側(cè)固定導(dǎo)航欄，使用列表標(biāo)簽，浮動(dòng)效果。

中間和右邊的內(nèi)容裝在一個(gè)大盒子里，分別為靜態(tài)輪播圖的品優(yōu)購(gòu)快報(bào)，右邊功能仍然使用列表標(biāo)簽和浮動(dòng)完成。

整體效果顯示。

接下來(lái)為今日推薦，實(shí)現(xiàn)的效果等同。

家用電器也是采用浮動(dòng)效果，給不同的盒子設(shè)置不同的寬高屬性，效果如下。

首頁(yè)整體頁(yè)面完成。

3.3.2 列表頁(yè) 同樣引入公共樣式，使用定位把秒殺定位到頭部固定位置，如圖。

接著為一個(gè)背景圖，把手機(jī)圖片和文字也定位到固定位置。

使用列表標(biāo)簽，外加浮動(dòng)實(shí)現(xiàn)效果，鼠標(biāo)懸停添加陰影。

下面為靜態(tài)分頁(yè)器，采用a標(biāo)簽制作。

列表頁(yè)完成，效果如下。

3.3.3 商品詳情頁(yè) 引入公共樣式，修改nav導(dǎo)航欄為商品導(dǎo)航，采用a標(biāo)簽制作。

下面小導(dǎo)航采用列表制作，左邊為無(wú)序，右邊為有序。

商品圖片詳情，大圖片套在盒子里，小圖片使用浮動(dòng)，和iconfont，下面文本使用margin和浮動(dòng)。

商品信息采用了p標(biāo)簽，span標(biāo)簽，div。以及下面的商品規(guī)格則使用表格得制作方法，外加鼠標(biāo)懸停效果。

商品詳情頁(yè)完成，如圖。

3.3.4 購(gòu)物車頁(yè)面 同樣引入公共樣式，刪除nav導(dǎo)航欄，如圖。

中間購(gòu)物信息的導(dǎo)航欄采用列表浮動(dòng)，下面為表格。

購(gòu)物車頁(yè)面完成，如圖。

結(jié)論 整體頁(yè)面采用為原生html和css開(kāi)發(fā)。先通過(guò)分析頁(yè)面，分析出頁(yè)面使用了版心效果，iconfont字體和多種公共樣式的使用。采用公共樣式開(kāi)發(fā)，使我們提高了開(kāi)發(fā)的效率；iconfont字體和版心的設(shè)計(jì)的使用更是進(jìn)一步提高的效果和頁(yè)面的美觀。除去公共樣式，大多內(nèi)容都采用了浮動(dòng)和定位效果的多次使用，使頁(yè)面開(kāi)發(fā)更簡(jiǎn)單快捷。

參 考 文 獻(xiàn) [1] 京東商城.劉強(qiáng)東.江蘇: 京東集團(tuán)董事局主席兼首席執(zhí)行官,1998. [2]劉國(guó)鈞，陳紹業(yè)，王鳳翥. 圖書館目錄[M]. 北京：高等教育出版社，1957.15-18. [3]辛希孟. 信息技術(shù)和信息服務(wù)國(guó)際研討會(huì)論文集：A集[C]. 北京：中國(guó)社會(huì)科學(xué)出版社，1994. [4]萬(wàn)錦坤. 中國(guó)大學(xué)學(xué)報(bào)論文文摘（1983-1993）.英文版[DB/CD]. 北京：中國(guó)大百科全書出版社，1996




模板及論文下載地址：點(diǎn)擊下載